I'm using bootstrap in my application.

Default.aspx

<div class="form-horizontal">
  <div id="Control1">
    <div class="control-group">
      <label class="control-label">DropDown Control
      </label>
      <div class="controls">
        <select data-val="true" data-val-required="Field is required" name="">
        <option value="">--Select--</option> 
        <option value=1>Value1</option>
        <option value=2>Value2</option>
        </select>
      </div>
    </div>
  </div>
  <div id="Control2" style="display;none;">
    <div class="control-group">
        <label class="control-label">Textbox Control
        </label>
       <div class="controls">
        <input type="text" id="txtId" data-val="true" data-val-required="Field is required"/>
       </div>
    </div>
  </div>
</div>   
<button id="btnSubmit" class="btn btn-success" onclick="Submit();">
  Submit</button>

<script type="text/javascript">

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

  function Submit() {
    if (!$('#Form1').valid()) {
      return false;
    }
  }
</script>

Here i need to validate only the Control1 div. I dont want to validate hidden div (Control2), but it is getting validated.

I'm using

js/jquery.validate.min.js
js/unpressed/jquery.validate.js
js/unpressed/jquery.validate.unobtrusive.js

Please help me.

I'm using bootstrap in my application.

Default.aspx

<div class="form-horizontal">
  <div id="Control1">
    <div class="control-group">
      <label class="control-label">DropDown Control
      </label>
      <div class="controls">
        <select data-val="true" data-val-required="Field is required" name="">
        <option value="">--Select--</option> 
        <option value=1>Value1</option>
        <option value=2>Value2</option>
        </select>
      </div>
    </div>
  </div>
  <div id="Control2" style="display;none;">
    <div class="control-group">
        <label class="control-label">Textbox Control
        </label>
       <div class="controls">
        <input type="text" id="txtId" data-val="true" data-val-required="Field is required"/>
       </div>
    </div>
  </div>
</div>   
<button id="btnSubmit" class="btn btn-success" onclick="Submit();">
  Submit</button>

<script type="text/javascript">

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

  function Submit() {
    if (!$('#Form1').valid()) {
      return false;
    }
  }
</script>

Here i need to validate only the Control1 div. I dont want to validate hidden div (Control2), but it is getting validated.

I'm using

js/jquery.validate.min.js
js/unpressed/jquery.validate.js
js/unpressed/jquery.validate.unobtrusive.js

Please help me.

• javascript
• jquery
• html
• validation
• twitter-bootstrap

• 1 Remove the class and data-val-required attributes from that from you want to remove the validation. – Code Lღver Commented Dec 27, 2013 at 7:20
• Set it to ignore: "#txtId" to ignore that field, as it's not really hidden when a parent element is not displayed. – adeneo Commented Dec 27, 2013 at 7:22
• Also, the default is ignore : ':hidden' and as jQuery's not() selector is used, that should work as well, so just removing the ignore rule you already have should also work. – adeneo Commented Dec 27, 2013 at 7:25

4 Answers 4

ignore: ':hidden' worked for me.

$("#myForm").validate({ 
    ignore: ':hidden', 
    submitHandler: function( form ) {
        //To do
    }
});

This ignored required validation only when the field was hidden. Hope this helps.

Refer this..

$(formSelector).bootstrapValidator({
excluded: [':disabled', ':hidden', ':not(:visible)'],
feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
},
live: 'enabled',
message: 'This value is not valid',
submitButtons: 'button[type="submit"]',
trigger: null,
fields: ...
});

For More information go to Bootstrap Validation Setting

You need to do this: ignore: '#hidden' worked for me

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

Set the validation control's Enabled property to false.

CausesValidation="False"