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

score 21 · Accepted Answer · answered Mar 23 '11 at 16:45

21

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.

answered Mar 23 '11 at 16:45

hwiechers

14,583
8
53
62

I added that, in my $(document).ready() part of my .js, and it's still validating after every key press. – East of Nowhere Nov 26 '15 at 00:13

score 2 · Answer 2 · answered Feb 24 '12 at 19:36

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.

This is the only approach that has worked for me. It seems like jQuery Validation doesn't respect element onkeyup and onfocusout, even though it looks like that would work in the docs. Setting these to false, "false", "", or a function that returns false didn't do anything for me. Toggling the form-level settings as above (without typewatch) worked. — Joe Wilson, Dec 16 '13 at 23:02

score 1 · Answer 3 · answered Mar 07 '19 at 22:18

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;

score 0 · Answer 4 · edited Aug 28 '13 at 13:17

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

score 0 · Answer 5 · answered Jul 05 '22 at 21:29

I wanted local validation to remain during onkeyup so that the user had a tighter feedback loop. This should only affect the remote validation (that results from RemoteAttribute):

$("[data-val-remote]").keyup(function () {
    // Avoid hitting server validation during onkeyup. Wait for onfocusout.
    return false;
});

ASP.NET Remote Validation only on blur?

5 Answers5

Linked