I needed to write a custom validator for the JQuery Validation Plugin recently so I wanted to document what I had to do so I can use Google to remember it.

I was using form hints in the text boxes along with marking the textboxes with the “required” class so that the JQuery Validation Plugin would validate the fields. However it was seeing the form hint text as the value of the field and marking the field valid.

This validator ignores the form hint when validating the field. Add the “noHint” class to the text field along with the “required” class. The inner function takes the value of the textfield and the actual html element of the field being validated. The value of returnVal is true or false and that determines whether or not the field is valid.

JQuery Validation Validator

jQuery.validator.addMethod('noHint', function(value, element) {
    var returnVal = value !== $(element).data('hint');
    if (returnVal) {
        $("form label[for='" + $(element).attr('id') + "']").css('display', 'none');
    }
    return returnVal;
}, 'This field is required.');

I also had an issue with the JQuery Validation Plugin not removing the error messages correctly when the fields where valid so that is what the if statement does.