ASP.NET Remote Validation only on blur?

问题:

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?"

回答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.

回答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.

回答3:

We had the same problem of focusing out the autocomplete textbox "DealingWithContactName" when autocomplete suggestion list pops up. Here we select the dynamically generated autocomplete list item on which the user clicks and set focus on to it. After 50ms we take the focus out from the textbox. It solved our problem.

$('body').on('click', 'ul.ui-autocomplete li a', function () {

        $('#DealingWithContactName').focus();

        window.setInterval(function () {
            $('#DealingWithContactName').blur();
        }, 50);
});

回答4:

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;