JQuery disables rule checking in one field

Question

I use MVC to create forms that are generated at runtime. For verification, I try my hand in the jQuery validation library, which is very convenient to use. I have a validation expression for each field in the cdata attribute of the tag

<input type="text" name="xyz" id="xyz" class="defaultTextBox" cdata="{validate:{required:true, decimal:true, messages: {required:'Please enter an decimal value', decimal:'Please enter a valid decimal'}}}"> 

It works great. Now one more requirement: some fields are displayed and hidden in accordance with the logic on the page, and I need to disable checking on hidden fields so that they do not interfere with the form submission. Just toggle the required: true for false and back to true should be enough. Only I do not know how.

Does anyone have any experience?

Answer 1

Just add an ignore rule and define a selector. In this example, the check will ignore all elements with class="ignore"

 $("#myform").validate({ ignore: ".ignore" }) 

Answer 2

If you are using ASP.NET MVC Unobtrusive jQuery validation, you need to set the settings this way. This is due to how Microsoft actually calls jQuery validation. This should be safe to use inside the ready method.

Edit: See Corey's comment below before copying this. This is my original code.

  $("form").data("validator").settings.ignore = ".data-val-ignore, :hidden, :disabled"; 

Then I just apply the .data-val-ignore class to things that are not checked.

Note that you probably want to add :hidden , which is actually the default ignore behavior defined in jquery.validate.js . I like to add :disabled too.

 $.extend($.validator, { defaults: { messages: {}, groups: {}, rules: {}, errorClass: "error", validClass: "valid", errorElement: "label", focusInvalid: true, errorContainer: $([]), errorLabelContainer: $([]), onsubmit: true, ignore: ":hidden", // default for ignore in jquery.validate.js ignoreTitle: false, onfocusin: function( element, event ) { this.lastActive = element; 

And finally, you might want to style it - especially useful when debugging.

 .data-val-ignore { background: #eee; } 

Answer 3

In response to Gabe's answer, you can also set the ignore value as the default, so you don't need to set it in every form.

 $.validator.setDefaults({ignore: ".ignore"}); 

Also note: the ignore field is a jQuery selector that is used in the jQuery not() function, so you can use any valid selector, not just simple classes.

See also http://docs.jquery.com/Plugins/Validation/validate#toptions for details of other default values ​​that can be set.

Answer 4

I had the best time with $('.multiselect').rules('remove');

in my case, for any reason, adding .cancel or .data-val-ignore for both $.validator.setDefaults and $('.multiselect') cannot be fixed.

I also tried

 $('select[multiple][data-val]').removeAttr('data-val').removeAttr('data-val-number').addClass('data-val-ignore').validate({ ignore: "[multiple]" }); $.validator.setDefaults({ ignore: ":hidden,:disabled,.data-val-ignore" }); $('.multiselect').closest('form').data('validator').settings.ignore = ":hidden,:disabled,.data-val-ignore, .data-val-ignore *"; $('.multiselect').data('validator').settings.ignore = "[multiselect]" 

each of these ... and their combinations

my jquery.validate.js was

 /*! jQuery Validation Plugin - v1.11.0 - 2/4/2013 * https://github.com/jzaefferer/jquery-validation * Copyright (c) 2013 Jörn Zaefferer; Licensed MIT */ 

jquery was

jQuery JavaScript Library v1.9.1 - Date: 2013-2-4