Criteria: Please only use Internet Explorer for testing purposes
Requirements: There is an alert message in place to check if a user enters a value with less than 8 digits - the user should not be able to proceed to the next field and must remain on the current field.
Challenge: The functionality works well, however, there is one issue - when a user enters a value in a text field with less than 8 digits, the focus returns in a way that moves the cursor to the first letter of the entered value instead of going back to the last letter of the value.
Sample Code:
<html>
<body>
<script>
function validateField(field) {
if (field.value.length < 8) {
// Toggle the active element's blur off and back on after the next blur
var active = document.activeElement;
if (active && active !== field) {
var blur = active.onblur || function(){};
active.onblur = function(){ active.onblur = blur };
}
field.focus();
alert("Value cannot be less than 8 digits");
}
}
</script>
<input type="text" id="test1" onblur='return validateField(this);'>
<br/>
<input type="text" id="test2" onblur='return validateField(this);'>
</tr>
</table>
</body>
</html>