How to override your own jQuery's validate method?

Question

I use jQuery validation method and I've set some default settings such as below

$.validator.setDefaults({
    errorContainer : "#msgErrors ul",
    errorLabelContainer: "#msgErrors",
    wrapper: "li",
    submitHandler: function(form) {
        lockScreen();
        if (typeof url !== 'undefined' && url != null) {
            loadContentViaAjax("tr#idElement", url, $(form).formSerialize(), "html");
        } else {
            form.submit();
        }
    },
    invalidHandler: function() {
        var divsMessages = $(".fadeOutAndEmpty");
        if (divsMessages.is(":animated")) {
            divsMessages.stop().removeAttr("style").show();
        }
    }
});

For these default settings work, I have to initialize the form by calling the validate method on every form that I have. To achieve this I placed after the page is fully loaded a call to

$("form").validate()

in an external JS file that is loaded by every page. This way all forms in my application will fire the validation method, but I didn't define any rules and calling validate method again passing the actual rules won't do the job.

Is there a way to define rules that has to be executed and those rules actually be executed even if the validate method has already been called?

How many forms do you have? If it's a handful, then just call the validate method on each form, with the settings required. — Paddy, Dec 04 '13 at 16:11
Some of the forms does not have validations to be done at all, that's I placed an empty validate method. What I actually need is the code executed by the submitHandler. I think I'll bind this code in the submit event of each form and then call it in the submit handler. — Philippe Gioseffi, Dec 04 '13 at 16:15
[tag:jquery-validation-engine] is a totally different plugin. I fixed your tags. Please be more careful when tagging questions. Thanks. — Sparky, Dec 04 '13 at 18:30

score 6 · Accepted Answer · edited May 23 '17 at 12:09

6

Quote OP:

"The problem is that for this code to work I have to call the validate method in every form that I have."

That's exactly what you are supposed to do, so I don't understand how or why this is a "problem".

The .validate() method is how you initialize the plugin to work on a particular form. Not much different than how you would initialize any other jQuery plugin to target an element.

You can set the options within .valdiate() for the one targeted form, or you can set the options within .setDefaults() which will apply to all forms on the page.

Quote OP:

"I thought that by calling the method validate in my JSP, I would override the method, but it does not."

Not sure what you mean by "override the method", but .validate() can only be called once on a particular form. Calling it again will do nothing.

Quote OP:

"The problem by doing that is I can't place any validation rules."

Using the jQuery Validate plugin, rules can be declared on your form in many different ways.

Here are just two very simple examples....

Example ONE - inline HTML by class

HTML:

<form id="myform">
    <input type="text" name="field" class="required" />
</form>

jQuery:

$(document).ready(function() {

    // set defaults for all forms on this page
    $.validator.setDefaults({
        // your defaults
    });

    // initialize plugin on form with id #myform
    $('#myform').validate();

});

DEMO: http://jsfiddle.net/pMp6d/

Example TWO - within .validate()

HTML:

<form id="myform">
    <input type="text" name="field" />
</form>

jQuery:

$(document).ready(function() {

    // set defaults for all forms on this page
    $.validator.setDefaults({
        // your defaults
    });

    // initialize plugin on form with id #myform
    $('#myform').validate({
        rules: {
            field: {
                required: true
            }
        },
        // other options specific to this form
    });

});

DEMO: http://jsfiddle.net/pMp6d/1/

EDIT:

If you need to declare rules after you've already called .validate(), you would use the .rules('add') method.

DEMO: http://jsfiddle.net/pMp6d/2/

$('input[name="fieldName"]').rules('add', {
    required: true
});

Alternatively, the same rule assigned to all input elements at once...

$('input').each(function() {
    $(this).rules('add', {
        required: true
    });
});

See this answer for more ways to declare rules: https://stackoverflow.com/a/17792569/594235

edited May 23 '17 at 12:09

Community

1
1

answered Dec 04 '13 at 18:21

Sparky

98,165
25
199
285

I'm aware of this two forms on how to validate forms using jquery's validation plugin, but unfortunatelly this does not answer my question. If I have a $("form").validate() I can't later have one specifying rules to override the first one. – Philippe Gioseffi Dec 04 '13 at 18:30
@Philippe, your question, _"The problem by doing that [`$("form").validate()`] is I can't place any validation rules."_ ~ My answer shows that you can. You're going to have to make your question more clear. – Sparky Dec 04 '13 at 18:33
If I have a $("form").validate() I can't later have one specifying rules to override the first one such as $("form").validate({// do the magic here}). – Philippe Gioseffi Dec 04 '13 at 18:36
@Philippe, no, you cannot override `.validate()` with another call to `.validate()`. See my edited answer. – Sparky Dec 04 '13 at 18:38
Now I can accept your answer. You just told me I can't do what I'm hoping to. – Philippe Gioseffi Dec 04 '13 at 18:43
@Philippe, the `.rules('add')` method will allow you to declare rules at any time after `.validate()` is called. – Sparky Dec 04 '13 at 18:43
Can you edit your answer and show how. And if were you that downvote the question, could you explain why? – Philippe Gioseffi Dec 04 '13 at 18:45
@Philippe, there is a working demo for `.rules('add')` in my answer and also more written about the `.rules()` method in the answer linked at the bottom. We generally do not discuss voting within comments, but it could have been because the question is not clearly written. – Sparky Dec 04 '13 at 18:47
@Philippe, the down-voter may come back later and remove their vote if they see the question is edited/improved. – Sparky Dec 04 '13 at 18:51
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/42520/discussion-between-philippe-and-sparky) – Philippe Gioseffi Dec 04 '13 at 18:53
1

@Daniel - you cannot dynamically change options. There is no workaround. Please do not ask new questions within comments section. – Sparky Mar 28 '17 at 12:41

How to override your own jQuery's validate method?

1 Answers1