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

Can you show a more complete code example as well as explain what you want in more detail? You start out asking about how to remove a class and then you end up talking about form events that are not represented by your code. It seems very disconnected. — Sparky
– Sparky, Commented Oct 4, 2013 at 15:43

Sparky · Accepted Answer · 2013-10-04 15:46:16Z

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.

I have updated the question, I hope it is clearly understandable now, Thankyou for the help

KyleMit · Accepted Answer · 2015-02-23 21:18:00Z

1

You can add this on submit event of form or on click of a submit button:

$('.errorField').removeClass('errorField');

edited Feb 23, 2015 at 21:18

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Oct 4, 2013 at 12:26

Shehzad Bilal

1449 bronze badges

Comments

Gorka · Accepted Answer · 2016-09-02 12:22:31Z

0

It's been a long time since this post but this is the solution I usually use:

You can create a new validation method or edit any of the built-in validation methods, like this:

https://jqueryvalidation.org/jQuery.validator.addMethod/

$.validator.addMethod("mymethod", function(){
    doSomethingBeforeCheck();
    return ruleValidator();
});

With this, u can do whatever you want before your rules are checked, in order to perform any action before validation.

answered Sep 2, 2016 at 12:22

Gorka

437 bronze badges

1 Comment

Sven Over a year ago

Can you tell me what is "ruleValidator" ? I cannot find it and though it seems your suggestion does not work.

Collectives™ on Stack Overflow

jQuery.validate event of before validation

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related