I am having difficulties getting getting my form to work. I have it partially working. Fields which are required are coming up in red when not filled out. The problem is that they remain red even when they are filled out. I need to add a blur handler but I don't know where. Here is the code. Ideally I like to be able that once they fill it out the page moves to the next input field, but I imagine this might be too complex. Here is the code
initValidation: function () {
var showError = function (message) {
$('<div>').html($('#templateErrorMessage').render({
message: message
})).children().prependTo(document.body);
};
$(document.body).on('submit', 'form', function (e) {
var form = $(this);
var inputs = form.find(':input:visible, .custom-select:visible select').filter('.required-entry');
var isValid = true;
inputs.each(function (i, input) {
input = $(input);
var value = $.trim(input.val());
input.closest('.form-row').toggleClass('has-error', !value);
/// $(input).blur ();
input.blur( function() {
if (isValid)
prompt.removeClass('has-error', !value);
});
isValid = isValid && !!value;
});
if (!isValid) {
e.preventDefault();
showError('Please fill in required fields!');
scrollTo(0, 0);
}
});
}