How to disable jquery validation on keyup and focusout for 1 specific html element when using the unobtrusive validation plugin?

Question

By default, the jQuery validation plugin is attaching validation handlers for focusin, focusout and keyup events.

1 of our validations is making a (synchronous) request to retrieve some data. I want to have that validation triggered only when the form is being submitted and not while the user is typing.

I know this can be modified for the whole form, but that's not what I'm looking for.

Is there a way to dynamically disable keyup validation for 1 element?

Update 1:
I forgot to mention that I'm using unobtrusive validation. So I don't think the answer of @Mario Johnathan is not an option.

Update 2: I tried the following things ($element is the element on which I want to change the validation behavior):

$element.validate({focusout: false, keyup: false});
$element.keyup(function() { return false; });
$element.off('keyup');
$element.unbind('keyup');

score 5 · Accepted Answer · edited Oct 12 '17 at 07:56

5

I myself was in the same scenario. Below is the code which I used for it.

    $.validator.setDefaults({
      onkeyup: function () {
        var originalKeyUp = $.validator.defaults.onkeyup;
        var customKeyUp =  function (element, event) {
          if ($("#your_element")[0] === element) {
            return false;
          }
          else {
            return originalKeyUp.call(this, element, event);
          }
        }

        return customKeyUp;
      }()
  });

Here what I have done is handle keyup events for that element so that validator doesn't do anything. For rest all elements the validator will kick into action. But the catch here is that particular element will have no validation on keyup at all.

edited Oct 12 '17 at 07:56

Shashank Bhatt

717
1
11
28

answered May 20 '16 at 06:41

Mink

160
3
12

Thank you. It seems this could indeed be a correct approach. I can finally continue to work. – TweeZz May 20 '16 at 08:33
Do let me know if it works for you. Although I've submitted the answer after very long time, I'll be glad if it helps. – Mink May 23 '16 at 09:32

score 4 · Answer 2 · answered Jan 30 '14 at 08:00

4

Try overriding the onkeyup function and create an onkeyup variable that you can customize for each field

$(#signupForm).validate({
    onkeyup: function(element) {
        var element_id = $(element).attr('id');
        if (this.settings.rules[element_id].onkeyup !== false) {
            $.validator.defaults.onkeyup.apply(this, arguments);
        }
    },
    rules: {
        myfield: {
            required: true,
            onkeyup: false
        }
    }
});

answered Jan 30 '14 at 08:00

Mario Radomanana

1,698
1
21
31

I don't think this is an option for me since I'm using unobtrusive validation, where the initialization is done in the unobtrusive validation plugin. Can you think of any other option? – TweeZz Jan 30 '14 at 08:54

score 3 · Answer 3 · answered Apr 10 '15 at 10:01

Add a new event listener to the $element and prevent the event bubbling up the DOM tree using stopPropagation(), which will prevent any parent handlers (including validate) being notified.

http://api.jquery.com/event.stopPropagation/

    $element.on('keyup',function(e){
      e.stopPropagation();
    });

score 2 · Answer 4 · answered Jul 23 '14 at 06:57

2

You can use one of the validate options.

var validator = $('#form_id').validate({
    onfocusout: false,
    rules: {...},
    messages: {...}
});

answered Jul 23 '14 at 06:57

Juancarlos Rodríguez

1,574
2
12
11

sry, but that is changing things for the whole form, not just for 1 element, right? – TweeZz Jul 23 '14 at 16:06
yes is for the whole form, now is not going to check when the user leaves the input. Only when he submits the form – Juancarlos Rodríguez Jul 24 '14 at 06:06
And my question was "Is there a way to dynamically disable keyup validation for 1 element?".. So NOT for the whole form :) – TweeZz Jul 25 '14 at 05:43
Sorry! I didn't understand, my bad! – Juancarlos Rodríguez Jul 26 '14 at 09:33

TweeZz · Answer 5 · 2014-01-30T13:18:15.533

Until now I was able to achieve what I need by changing the source code of the jQuery.validation plugin.

By passing in the event (if any) to the validation methods, I'm able to check if it was triggered from a focusout or a keyup.

Not ideal, but working.

function validateWithSomeLongTakingCallback(source, args, event) {
    var shouldTriggerValidation = (!event || (event.type !== 'focusout' && event.type !== 'keyup'));

    if (!shouldTriggerValidation) {
        args.IsValid = true;
        return;
    }
    ...
}

score 0 · Answer 6 · answered Jul 28 '15 at 12:46

From other forum:

This is still an issue (jQuery 1.7.2 and Validation 1.9.0). I've created a simple fix and will also submit a pull request.

To fix: In jquery.validate.js in the "element" function (line 361) add this if statement to the top of the function like so (leave everything else the same):

element: function( element ) {
            //if the element is set to be ignored, don't continue validation
            if ( $(element).not(this.settings.ignore).length === 0 ) {
                return;
                }
            element = this.validationTargetFor( this.clean( element ) );
            this.lastElement = element;
            this.prepareElement( element );
            this.currentElements = $(element);
            var result = this.check( element ) !== false;
            if (result) {
                delete this.invalid[element.name];
            } else {
                this.invalid[element.name] = true;
            }
            if ( !this.numberOfInvalids() ) {
                // Hide error containers on last error
                this.toHide = this.toHide.add( this.containers );
            }
            this.showErrors();
            return result;
        },

How to disable jquery validation on keyup and focusout for 1 specific html element when using the unobtrusive validation plugin?

6 Answers6