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!

Remuneration

Answer 1

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.

Goofball

Fantastic tip on disabling keyup by returning false. – Remuneration

This was the only approach I found that was able to suppress the keyup validation. It was excessive as I was making an ajax call in order to validate the input. In the end, I set a data attribute on the input element which was controlled by the ajax result of an onchange event for the input element. This allowed jquery validate to have a simple return true or false while still making a request to the server for database validation. – Winston

There were several events to suppress, I made a simple placeholder for them, var fnfalse = function(){ return false; }, and then used that to block the functionality, $(element).keyup(fnfalse).blur(fnfalse).focusout(fnfalse);. – Winston

2018 and still working! Thanks a lot, you saved my day. – Pyelography

The link is dead unfortunately :( – Dibranchiate

Answer 2

$.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
}

Banian

aspnet.uservoice.com/forums/41201-asp-net-mvc/suggestions/… – Terpene

This would disable the keyup validation trigger for all elements, no? He was asking how to disable it for only 1 element. – Rizzio

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

Tuinal

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?

Hatty

Yeah, I saw that. I like it on most of the fields, just not the credit card fields or the remote validation fields (I'd rather wait to hit the website once onblur instead of on every change of a character). May just be a limitation I have to live with. I'll probably do the global setDefaults like you mentioned above... – Remuneration

...At first I was setting this up using <script type="text/javascript"> $(function() { $.validator.setDefaults({ onkeyup: false }) }); </script> to make sure the document and scripts had loaded and were ready to use, but it didn't work. I had to pull it out to get it to work, e.g.: <script type="text/javascript"> $.validator.setDefaults({ onkeyup: false }) }); </script>. However, I'm wondering what will happen if the user hasn't finished downloading the scripts yet. I've put them at the bottom of the document instead of in the head. – Remuneration

Ended up just disabling the "onkeyup" – Remuneration

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.

Keldon

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.

Inquisitionist