Prevent hidden/disabled fields to be Validated with jQuery.validate()

Question

I have 3 field (fieldA, fieldB, fieldC) in my MVC4 application and I show/hide fieldB and fieldC according to the value of fieldA. Although there is no problem for show/hide these fields, I cannot prevent fieldB and fieldC to be validated when they hidden or disabled. I tried 3-4 different kind of methods i.e. using disabled, hidden property in showHideFields() method and "ignore" property in jQuery("#...").validate method. But none of them has worked properly yet. Could you please rovide such a kind of solution in order to do this?

Razor:

function showHideFields() {
    var $index = $('#fieldA').val();
    if ($index == '1') {           
        $('#fieldB').show(); 
        $('#fieldC').show(); 
    }
    else {
        $('#fieldB').hide(); 
        $('#fieldC').hide(); 
    }
}


jQuery(function () {

    jQuery("#fieldA").validate({
        expression: "if (VAL) {return true;} else {return false;}", 
        message: "Please fill in this field"
    });

    jQuery("#fieldB").validate({
        expression: "if (VAL) {return true;} else {return false;}",
        message: "Please fill in this field"
    });

    jQuery("#fieldC").validate({
        expression: "if (VAL) {return true;} else {return false;}",
        message: "Please fill in this field"
    });
    ...
}

**Hidden fields are ignored by default.** What version of the plugin are you using? — Sparky, Dec 05 '13 at 20:35
The code within your calls to `.validate()` makes no sense... are you sure you're using [the jQuery Validate plugin](http://jqueryvalidation.org)? — Sparky, Dec 05 '13 at 20:53
Please read [my previous comment](http://stackoverflow.com/questions/20409007/prevent-hidden-disabled-fields-to-be-validated-with-jquery-validate#comment30481883_20409007), above this one, where I asked you to confirm which plugin you're using. Also, be more careful when tagging questions. The [tag:jquery-validate] tag is not for [the plugin you said you're using](http://www.geektantra.com/2009/09/jquery-live-form-validation/) in your comments on my answer. — Sparky, Dec 09 '13 at 02:33

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

Problems with your code:

jQuery("#fieldC").validate({
    expression: "if (VAL) {return true;} else {return false;}",
    message: "Please fill in this field"
});

1) The .validate() method (from the jQuery Validate plugin) cannot be attached to a field id. It can only be attached to the whole form.

2) What is expression: supposed to be? There is no such option for this plugin and VAL is not defined anywhere that you've shown.

As far as your question, since version 1.9, hidden fields are ignored by default using this plugin. There are no special settings or options; hidden fields will be ignored.

Notice in this demo that field2 contains style="display:none" and it's not validated despite having the required rule declared...

DEMO: http://jsfiddle.net/eWe9a/

EDIT:

As finally revealed in OP's comments below:

"I followed the example on that page geektantra.com/2009/09/jquery-live-form-validation and all I have followed is true according to that page."

You are not using the jQuery Validation plugin as led to believe when you tagged the question with jquery-validate and said you were using jQuery.validate().

The solution is to include the proper plugin you're asking about and my example will work perfectly for you.

edited May 23 '17 at 12:29

Community

1
1

answered Dec 05 '13 at 20:43

Sparky

98,165
25
199
285

Dear Sparky, I followed the example on that page http://www.geektantra.com/2009/09/jquery-live-form-validation/ and all I have followed is true according to that page. Is there any mistake? On the other hand, I looked at your demo, but I need a validation after moving from an input and submitting the form as on the example http://www.geektantra.com/2009/09/jquery-live-form-validation/. Could you please give an example like on that page containing a hidden field? Thanks in advance. – Jack Dec 08 '13 at 22:59
@H.Johnson, well that's because the example you're following on [this page](http://www.geektantra.com/2009/09/jquery-live-form-validation/) is **not** even using the [jQuery Validation plugin](http://jqueryvalidation.org)! You have to be more careful to properly tag the question and include all the proper information about which plugins you're using. When somebody refers to `jQuery.validate()` and tags the question with [tag:jquery-validate], they're supposed to be talking about this: http://jqueryvalidation.org – Sparky Dec 09 '13 at 02:35
Thanks for help. Sorry, but I have never used such a kind of validation plugin before and as "jquery.validate.js" is used the approach I followed, I thought that I have used "the jQuery Validation plugin". Anyway, I need an example performing these requirements below: 1) Of course I would like to use jQuery Validation plugin. I want the fields to be validated after switch to another control (live validation). 2) In addition to this, if the user directly press the Submit button, all the necessary fields should be validated as explained on the first step. Thanks in advance... – Jack Dec 09 '13 at 22:10
@H.Johnson, please don't ask a whole new question within comments. I already answered your original question as you posted it. Just post a new question. – Sparky Dec 09 '13 at 22:21
Ok, I have created on that page: http://stackoverflow.com/questions/20482448/live-form-validation-using-jquery-validation-plugin Could you help me please? – Jack Dec 09 '13 at 22:47

score 0 · Answer 2 · answered Dec 05 '13 at 20:57

0

Seems weird, because jQuery Validation ignores hidden fields by default. Check live demo.

answered Dec 05 '13 at 20:57

Zabavsky

13,340
8
54
79

Yeah, just like I already said. – Sparky Dec 05 '13 at 21:01
@Sparky, I know, just wanted to show a live sample close to the situation. Your answer is correct though, +1. – Zabavsky Dec 05 '13 at 21:26
@Zabavsky: I followed the example on that page http://www.geektantra.com/2009/09/jquery-live-form-validation/ and all I have followed is true according to that page. Is there any mistake? On the other hand, I looked at your demo, but I need a validation after moving from an input and submitting the form as on the example http://www.geektantra.com/2009/09/jquery-live-form-validation/. Could you please give an example like on that page containing a hidden field? Thanks in advance. – Jack Dec 08 '13 at 23:00
1

@H.Johnson, it's not a `jQuery validation` plugin. You should have been more specific asking the question. – Zabavsky Dec 09 '13 at 08:08
@Zabavsky: Thanks for help. Sorry, but I have never used such a kind of validation plugin before and as "jquery.validate.js" is used the approach I followed, I thought that I have used "the jQuery Validation plugin". Anyway, I need an example performing these requirements below: 1) Of course I would like to use jQuery Validation plugin. I want the fields to be validated after switch to another control (live validation). 2) In addition to this, if the user directly press the Submit button, all the necessary fields should be validated as explained on the first step. Thanks in advance... – Jack Dec 09 '13 at 22:11
@H.Johnson, please don't ask a whole new question within comments... it's not fair to people who have already answered this. – Sparky Dec 09 '13 at 22:22

Prevent hidden/disabled fields to be Validated with jQuery.validate()

2 Answers2