While using JQuery, I encountered an issue with error checking that involves adding a class to an <input> checkbox. This class includes an :after pseudo-class which is designed to display additional information, but for some reason, it doesn't show up as expected.
I have attempted various solutions to resolve this issue, but so far, no luck. You can view the website where I am working on this problem here: SITE
The only logical explanation I can think of for this malfunction is that perhaps the page needs to be refreshed after the new class addition, although in other instances where I add a new class, everything functions correctly.
The error check triggers when the checkbox is checked without selecting a scanner.
Below is the relevant code snippets:
HTML
<form id="lp5_form" class="prodForm">
<label><span>Apple Product: </span><select class="model">
<option value="0">iPod 5</option>
<option value="1">iPhone 5</option>
</select></label>
<label style="padding: 10px 0;"><h4>Sled Options :</h4></label>
<table>
<tr>
<td>Encryption Capability: </td><td><select class="encryption">
<option value="0">Standard</option>
<option value="1">SRED for PCI Compliancy</option>
</select></td>
</tr>
<tr>
<td>Scanner: </td><td><select class="scanner">
<option value="0">None</option>
<option value="1">1D</option>
<option value="2">2D</option>
</select></td>
</tr>
<tr>
<td>Bluetooth: </td><td><input class="bt" type="checkbox" value="bluetooth" /></td>
</tr>
</table>
</form>
CSS
.pn_error{}
.pn_error:after, .pn_error::after {
content: "*Please select a scanner";
color: red;
position: relative;
display: block;
width: 200px;
left: 20px;
top: -2px;
font-size: 12px !important;
}
JQUERY Error Check
if(scanner == 0) {
bt = 0;
$(id+' .bt').addClass('pn_error');
}
Any assistance or insights on addressing this issue would be greatly appreciated.