ASP.NET Remote Validation only on blur?

Question

I'm using the remote validation in MVC 3, but it seems to fire any time that I type something, if it's the second time that field's been active. The problem is that I have an autocomplete box, so they might click on a result to populate the field, which MVC views as "leaving" it.

Even apart from the autcomplete thing, I don't want it to attempt to validate when they're halfway through writing. Is there a way that I can say "only run validation n milliseconds after they are finished typing" or "only run validation on blur?"

Answer 1

MVC 3 relies on the jQuery Validation plugin for client side validation. You need to configure the plugin to not validate on key up.

You can switch it globally off using

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

See http://docs.jquery.com/Plugins/Validation/Validator/setDefaults and the onkeyup option here http://docs.jquery.com/Plugins/Validation/validate.

Answer 2

For future reference, I found it's possible to do this in combination with the typeWatch plugin (http://archive.plugins.jquery.com/project/TypeWatch).

Basically what you want to do is (in my case for a slug):

/*Disable keyup validation on focus and restore it to onkeyup validation mode on blur*/
$("form input[data-val-remote-url]").on({
    focus: function () {
        $(this).closest('form').validate().settings.onkeyup = false;
    },
    blur: function () {
        $(this).closest('form').validate().settings.onkeyup = $.validator.defaults.onkeyup;
    }
});

$(function () {
    /*Setup the typeWatch for the element/s that's using remote validation*/
    $("#Slug").typeWatch({ wait: 300, callback: validateSlug, captureLength: 5 });
});

function validateSlug() {
    /*Manually force revalidation of the element (forces the remote validation to happen) */
    var slug = $("#Slug");
    slug.closest('form').validate().element(slug);
}

If you're using the vanilla typeWatch plugin, you'll have to setup a typeWatch for every element because the typeWatch callback doesn't give you access to the current element via $(this), it only passes the value.

Alternatively you can modify the typeWatch plugin to pass in the element (timer.el) and then you can apply a delay to all.

Answer 3

For some reason (maybe because of conflicts with the unobtrusive plugin), hwiechers' answer didn't work for me. Instead, I had to get the validator of my form with .data('validator') (as mentioned in this answer) and set onkeyup to false on it.

var validator = $('#form').data('validator');
validator.settings.onkeyup = false;