I am aware that the jQuery validation plugin implements lazy
validation. However, I have a requirement to implement "eager"
validation on one of my forms. I.e. As soon as the user tabs through
the fields on the form, even for the first time, any validation errors
must be highlighted.
I have been able to implement this for text input fields but can't
seem to do it for radio buttons. So when the user tabs through my
form without entering any data or selecting any options, errors are
immediately highlighted on text fields but not on radio buttons.
My jQuery validate code is:
$(document).ready(function(){
$.validator.addMethod("selectionTitle", selectionValidation,
"Select title");
$.validator.addMethod("textOnly", textOnlyValidation, "Please
enter only alpha characters( a-z )");
$.validator.addMethod("forenameDefault",
forenameDefaultValidation, "Enter valid forename(s) up to 25
characters");
$.validator.addMethod("surnameDefault", surnameDefaultValidation,
"Enter valid surname(s) up to 30 characters");
var validator = $("#personalDetailsForm").validate({
onfocusout: function(element) {
$(element).valid();
},
errorPlacement: function(error, element) {
error.appendTo( element.parent().parent() );
},
errorElement: "p",
meta: "validate",
groups: {
formDateOfBirth: "formDateOfBirthDD formDateOfBirthMM
formDateOfBirthYY",
formPostcode: "formPostcodeFirstPart formPostcodeSecondPart"
},
rules: {
formTitle : {selectionTitle: true},
formForename: {textOnly: true, forenameDefault:true},
formSurname: {textOnly: true, surnameDefault:true}
}
});
});
I forced the 'eager' validation on text fields using the following
snippet:
onfocusout: function(element) {
$(element).valid();
Is there any equivalent way of forcing the eager validation on radio
buttons?
Thanks in advance.