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"
        }
    })
); 

});

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"
        }
    })
); 

});

• javascript
• jquery
• asp-mvc
• jquery-validate

• 1 please add your selector code, then we can see what is missing... – Serdar Commented Dec 11, 2013 at 21:14
• @SerdarBuyuktemiz: I added at the bottom of the question. – Jack Commented Dec 11, 2013 at 21:25

1 Answer 1

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/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.