jQuery.validate event of before validation

Question

I have following code

$("#Form").validate({

    errorPlacement: function(error, element) {
        element.addClass('errorField');
        element.after(error);
    },
    rules: {
        ...
    }
});

The errorPlacement function is setting a css class errorField to the element when it fails the described rules and every time before validation I want to remove this class errorField.

element.removeClass('errorField');

So my question, is there any event in jquery.validate that fires before the validation took place?

so if that element is hosting this class errorField, the above code will remove the class from this element and will re-validate the field and may apply this class again if the field fails the rules again.

This may also done in any event that fires after the validation so if the element passes the rule I will remove the class errorField.

Note: errorField is a css class that will highlight the field to notify the user about the error

Answer 1

I have no idea what you mean by "before validation". How is the plugin supposed to know what to do before something happens?

Quote OP:

"The validation triggers at both events form.submit and form.change, It works fine with form.submit, but i didn't work for form.change"

"It works fine..." ~ What works fine? You have not shown any code whatsoever for what you're trying to describe here. The plugin will trigger validation with its built in events like onkeyup and onfocusout. (The form changes on every key up).

I think the problem might be in your interpretation of the errorPlacement callback function's intended purpose. It's only purpose is for layout... for one-time placement of the error message object within your page. Once placed, it's not re-placed... it's toggled.

I think you may want to use highlight and unhighlight instead. These two callbacks will fire every time an element is validated. In other words, these are the two callbacks that will toggle messages as they're validated.

However, I'm not sure you even need to go this far. It looks like you simply want to toggle a class called .errorField. If that's the case, just add this class to the default error classes with the errorClass option and it will automatically toggle as needed.

$("#Form").validate({
    errorClass: 'error errorField', // specify classes to toggle on error (default: error)
    validClass: 'valid', // specify classes to toggle on validity (default: valid)
    errorPlacement: function(error, element) {
        // element.addClass('errorField'); // <-- remove this line
        element.after(error);
    },
    rules: {
        ...
    }
});

See all options & callback functions here.