Currently, I am utilizing an ajax call to submit a FORM. My goal is to highlight any inputs that fail validation and then remove the highlight as soon as they begin entering information into the input field. While I am successful in adding the error class, I have been facing challenges in removing it. Despite trying various approaches such as keydown, keypress, keyup, change, and focus events, I have not achieved the desired outcome.
In all my attempts, either nothing occurs or the alert only triggers once immediately after submission.
Below is my current implementation:
$(document).ready(function() {
$('#config_form_submit').off().click(function(e) {
e.preventDefault();
$('#config_form').submit();
});
function removeErrorClass() {
alert($(this).html());
}
// $("input .error").keyup(removeErrorClass());
//$("input .error").change(removeErrorClass());
//$("input .error").keydown(removeErrorClass());
//$(".error").on(keypress, removeErrorClass());
$('#config_form').off().submit(function(e) {
e.preventDefault();
$.ajax({
type:"POST",
url: $('#config_form').attr('action'),
data: $(this).serialize(),
datatype: 'json',
success: function(data) {
$("#config_results").text(data.message);
if(data.errors.length > 0)
for(index in data.errors) {
$("#id_"+data.errors[index]).addClass("error");
$("#id_"+data.errors[index]).bind("input", removeErrorClass());
}
},
});
});
}); //document.ready