ASP.net MVC 3 jQuery Validation; Disable Unobtrusive OnKeyUp?

Question

Is there a way to disable the jQuery Validation for a certain validator (creditcard) so that it only occurs onblur, instead of onkeyup?

Based on the jQuery Validator documentation I thought I could do something like this:

$(function () {
    $("[data-val-creditcard]").validate({
        onkeyup: false
    })
});

However, it doesn't seem to be working.

I also tried doing the following on my validator:

public class CreditCardValidator : DataAnnotationsModelValidator<CreditCardAttribute>
{
    string _message;

    public CreditCardValidator(ModelMetadata metadata, ControllerContext context, CreditCardAttribute attribute)
        : base(metadata, context, attribute)
    {
        _message = attribute.ErrorMessage;
    }

    public override IEnumerable<ModelClientValidationRule> GetClientValidationRules()
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = _message,
            ValidationType = "creditcard"
        };
        rule.ValidationParameters.Add("onkeyup", false);
        return new[] { rule };
    }
}

It doesn't work either, but I was just taking a stab at the appropriate use of ValidationParameters.

It is kind of annoying to be entering a credit card number in a form and having it randomly change from invalid to valid, then back to invalid.

Any ideas? Thanks!

Answer 1

$.validator.setDefaults doesn't work for unobtrusive validation as the validator is initialized internally.

To change the settings on forms that use unobtrusive validation you can do the following:

var validator = $("form").data("validator");
if (validator) {
    validator.settings.onkeyup = false; // disable validation on keyup
}

Answer 2

Ok guys,

I was in the same problem and found this thread: http://old.nabble.com/-validate--onkeyup-for-single-field-td21729097s27240.html

The idea is basically to overwrite the keyup event and return false. So in your specific case you'll need to add:

$('#my-form').validate({
   rules: {
     [...]
   }
} 
// Disable keyup validation for credit card field
$("[data-val-creditcard]").keyup(function() { return false } );

And you'll see that your credit card field is only checked on blur or submit (but the rest is working on keyup also).

I was looking for the same solution, and found that the answer here could be improved, so I thought it would be nice to share it here.

Answer 3

I realise this is an old post, but none of the responses appear to answer this question,

How to disable onkeyup and enable onblur?

I was looking for this so thought I would share the answer.

As Ben Foster rightly said, onkeyup can be disabled by doing the following

var validator = $("form").data("validator");
if (validator) {
    validator.settings.onkeyup = false;
}

To enable validation onblur we can use onfocusout

validator.settings.onfocusout = function(element)
{
    $(element).valid();
};

So our code to disable onkeyup and enable onblur look like this

var validator = $("form").data("validator");
        if (validator)
        {
            validator.settings.onkeyup = false; 
            validator.settings.onfocusout = function(element)
            {
                $(element).valid();
            };
        }

Answer 4

Don't know how to set it to a specific field, but you could try this to disable keyup validation (for all fields):

$.validator.setDefaults({
   onkeyup: false
})

See

• MVC 3 specifying validation trigger for Remote validation
• ASP.NET Remote Validation only on blur?

Answer 5

You could also use something like the above,

$("form").validate({
    onfocusout: false,
    onkeyup: false
});

In case you have custom rules then,

$("form").validate({
    onfocusout: false,
    onkeyup: false,
    rules: {
        "name1": {
            required: true,
            email: true,
            maxlength: 100
        },
        "name2": {
            required: true,
            number: true
        }
    }
});

This answer in the jQuery forum helped me a lot.

Answer 6

You could set the defaults to off in the onfocus event of the credit field, then turn them in the onblur. Seems hacky, but could work.