jQuery Validation Plugin cannot Validate on Keyup

Question

I use jQuery Validation Plugin and my form can be validated as below (let's say I have 2 fields A and B):

It Works:
I clicked A and type something and then delete. Then I clicked B. In that case validation message is shown.

It DOES NOT Work:
I **clicked A and do not type nothing. Then I clicked B. In that case the related validation message related to field A is not shown. But I want it to shown as above.

I tried to use onsubmit, onkeyup and onclick parameters in validate method, but it did not make any sense. How can I provide this?

Razor:

jQuery(function () {
    $.validator.setDefaults(
    $("#myform").validate({
        //onsubmit: false, ???
        //onkeyup: true, ???
        //onclick:true, ???
        onkeyup: function(element){this.element(element);},
        rules: {
            'Applicant.Name': "required",
            'Applicant.Surname': "required"
        },
        messages: {
            'Applicant.Name': "Please enter your Name",
            'Applicant.Surname': "Please enter your Surname"
        }
    })
); 

});

please add your selector code, then we can see what is missing... — Serdar
– Serdar, Commented Dec 11, 2013 at 21:14

Sparky · Accepted Answer · 2013-12-12 00:48:08Z

5

Your code:

jQuery(function () {
    $.validator.setDefaults(
        $("#myform").validate({ .... })
    ); 
});

IMPORTANT: You cannot put the .validate() method inside of .setDefaults(). It makes no sense.

The .validate() method is for initializing the plugin (with options) on a form.
The .validator.setDefaults() method is for setting the options that will apply to all forms on the page, however, this method will not initialize anything.

If you want to set your options for #myform, only use .validate()...

jQuery(function () {
    $("#myform").validate({
        // options only for #myform
    });
});

If you want to set your options for use on all forms on the page, use .validator.setDefaults(). Then use .validate() on every form...

jQuery(function () {

    $.validator.setDefaults({
        // options for all forms on page
    });

    $("#myform").validate({
        // options only for #myform
    });

    $("#myform2").validate({
        // options only for #myform2
    });

});

Default plugin operation:

By default, the plugin does not do any "key-up" validation until after the field is initially validated by another event.

So here is a properly modified version of the default onkeyup callback function so it will provide immediate onkeyup validation.

DEMO: http://jsfiddle.net/QfKk7/

onkeyup: function (element, event) {
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } else {
        this.element(element);
    }
}

Your code:

//onsubmit: false, ???
//onkeyup: true, ???
//onclick:true, ???

These options must never be set to true.

Documentation:

onfocusout
Type: Boolean or Function()
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

onkeyup
Type: Boolean or Function()
Validate elements on keyup. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event. Set to false to disable. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

onclick
Type: Boolean or Function()
Validate checkboxes and radio buttons on click. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event. Set to false to disable. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

onsubmit
Type: Boolean or Function()
Validate the form on submit. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event. Set to false to disable. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

edited Dec 12, 2013 at 0:48

answered Dec 11, 2013 at 22:45

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jack Over a year ago

Dear Sparky, Thanks a lot for perfect explanations (I voted up). But my need is a little bit different. Could you please revise the code so that providing this scenario? When the User directly click to Field A there will not be any validation. After clicking to another field (or Field A lost focus) Field A will be validated (validation should not be done after each key up, it should be done after the related input lost focus). In addition to this, if the User directly click to Submit button without clicking to any field, all the related fields should be validated. Thanks in advance.

Sparky Over a year ago

@H.Johnson, if validation should not be done on each key up, what happens when you simply set the onkeyup option to false?

Jack Over a year ago

It seems to be worked. But the strange thing is that, Althought all the validation rules, entity rules, class, etc. are the same for Name and Surname fields, it works one of them for the first validation (clicking X field and typing something then focusing another field and then clearing text on the X field). I think it is not a known symptom, so I will examine the problem. Thanks.

Sparky Over a year ago

@H.Johnson, please read the part of my answer that explains the "default" behavior.

Sparky Over a year ago

@ErFaiyazAlam, my version works; it ignores validation when the field is empty while using the "tab" key, otherwise, it validates on every key-up immediately. In other words, it's exactly the same as what's built into the plugin except that it's "eager" rather than "lazy". Your version is the same as mine, except the "tab" key will also trigger validation. It's a matter of preference.

|

Collectives™ on Stack Overflow

jQuery Validation Plugin cannot Validate on Keyup

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related