How to disable jquery validation when activating and focusing on 1 specific html element when using an unobtrusive validation module?

By default, the jQuery validation plugin attaches validation handlers for the focusin , focusout and keyup .

One of our checks makes a (synchronous) request for some data. I want this check to be triggered only when the form is submitted, and not during user input.

I know that this can be changed for the whole form , but this is not what I am looking for.

Is there a way to dynamically disable key verification for 1 element?

Update 1 :
I forgot to mention that I use an unobtrusive check . So I don't think @Mario Johnathan's answer 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');
+7
javascript jquery javascript-events jquery-validate unobtrusive-validation
source share
6 answers

I myself was in the same scenario. Below is the code 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's what I did - these are keyup events for this element so that the validator doesn't do anything. For relaxation, all the elements that the validator will take effect. But the catch here is that a particular element will not check for keys at all.

+3
source share

Try overriding the onkeyup function and creating an onkeyup variable that you can configure 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 } } }); 
+3
source share

Add a new event listener to the $ element and prevent the event bubbling the DOM tree with stopPropagation (), which will prevent all parent handlers from being notified (including validation).

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

  $element.on('keyup',function(e){ e.stopPropagation(); }); 
+2
source share

You can use one of the verification options.

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

So far, I have been able to achieve what I need to change the jQuery.validation plugin source code .

Passing verification methods in case (if any), I can check if this was called from the focus or keyboard.

Not perfect, but it works.

 function validateWithSomeLongTakingCallback(source, args, event) { var shouldTriggerValidation = (!event || (event.type !== 'focusout' && event.type !== 'keyup')); if (!shouldTriggerValidation) { args.IsValid = true; return; } ... } 
0
source share

From another forum:

This is still a problem (jQuery 1.7.2 and Validation 1.9.0). I created a simple fix and will also send a transfer request.

Fix: In jquery.validate.js in the "element" function (line 361) add this if statement at the top of the function, like this (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; }, 
0
source share

All Articles