How to override your own jQuery's validate method?

jquery, jquery-validate

Solution

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

Problem

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?

Original source

Related problems