I have a simple question because I'm feeling a bit lost.
It seems that in Internet Explorer, the contents of my span won't update even though the input is valid. However, in other browsers, the span content changes successfully.
If anyone could take a look at the fiddle and help me out, I would be really thankful.
HTML
<form action="javascript:void(0);" id="formId1" name="validateForm1">
<table class="inputTables" id="create_trck_table1">
<thead>
<tr>
<th>Attribute</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID</td>
<td><input id="id1" maxlength="9" title="e.g AMS30-E3" type="text" required> <span></span></td>
</tr>
</tbody>
</table>
</form>
<p id="myP">
</p>
CSS
input[type="text"]:invalid+span::after {
color: red;
content: "X";
}
input[type="text"]:valid+span::after {
content: "\2713";
color: limegreen;
}
Javascript (Jquery)
$(':input').on('keydown', function() {
var valid = $('#id1').is(':valid');
$('#myP').html('The Input is ' + valid);
})