title: How to perform conditional client side validation by jquery validate plugin
body: <p>here i am giving my html. i have a dropdown which showing few product info and showing hobbies by checkbox. i want if user select product <strong>iPod</strong> then validation will not fire for hobbies checkboxes other wise fire. how to perform this kind of conditional validation by jquery validate plugin adding jquery rules.</p>
  
  <pre><code>&lt;form name="TestVal" method="post" action="/" novalidate="novalidate"&gt;
      &lt;div class="form-horizontal"&gt;
          &lt;h4&gt;DateValTest&lt;/h4&gt;
          &lt;hr&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label style="padding-top: 0px;" for="Products" class="control-label col-md-2"&gt;Products&lt;/label&gt;
              &lt;div class="col-md-10"&gt;
                  &lt;select name="SelectedProductId" id="SelectedProductId" data-val-required="Select any Product" data-val-number="The field SelectedProductId must be a number." data-val="true"&gt;
                      &lt;option value=""&gt;-- Select Product--&lt;/option&gt;
                      &lt;option value="1"&gt;IPhone&lt;/option&gt;
                      &lt;option value="2"&gt;MacBook Pro&lt;/option&gt;
                      &lt;option value="3"&gt;iPod&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;span data-valmsg-replace="true" data-valmsg-for="SelectedProductId" class="field-validation-valid text-danger"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10 input-validation-error"&gt;
                  &lt;b&gt;Hobbies&lt;/b&gt;&lt;br&gt;
                  &lt;input type="checkbox" value="true" name="Hobbies[0].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"&gt;&lt;input type="hidden" value="false" name="Hobbies[0].IsSelected"&gt;
                  &amp;nbsp; 
                  &lt;label for="Hobbies_0__IsSelected"&gt;Reading&lt;/label&gt;
                  &amp;nbsp;
                  &lt;input type="hidden" value="Reading" name="Hobbies[0].Name" id="Hobbies_0__Name"&gt;&lt;input type="checkbox" value="true" name="Hobbies[1].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"&gt;&lt;input type="hidden" value="false" name="Hobbies[1].IsSelected"&gt;
                  &amp;nbsp; 
                  &lt;label for="Hobbies_1__IsSelected"&gt;Sports&lt;/label&gt;
                  &amp;nbsp;
                  &lt;input type="hidden" value="Sports" name="Hobbies[1].Name" id="Hobbies_1__Name"&gt;&lt;input type="checkbox" value="true" name="Hobbies[2].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"&gt;&lt;input type="hidden" value="false" name="Hobbies[2].IsSelected"&gt;
                  &amp;nbsp; 
                  &lt;label for="Hobbies_2__IsSelected"&gt;Movies&lt;/label&gt;
                  &amp;nbsp;
                  &lt;input type="hidden" value="Movies" name="Hobbies[2].Name" id="Hobbies_2__Name"&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" class="btn btn-default" value="Submit"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h2>Right now i am doing client side validation by this way</h2>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var declarationsError = $('#Hobbies-error');
      $('form').submit(function () {
          if ($("#SelectedProductId option:selected").text() != 'iPod') {
              if ($(".hobbycls:checkbox:checked").length &lt;= 0) {
                  declarationsError.empty();
                  declarationsError.append("&lt;span&gt;Select Any Hobbie's checkbox&lt;/span&gt;");
                  declarationsError.show();
                  return false;
              } else {
                  declarationsError.empty();
                  declarationsError.hide();
              }
          }
  
          declarationsError.hide();
          return true;
      });
  
      $('.hobbycls').change(function () {
          if ($(this).is(':checked')) {
              declarationsError.empty();
              declarationsError.hide(); // hide error message
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>the above script is working fine but i want to do the same using jquery validate plugin adding rules.</p>
  
  <p>so please guide me what jquery validate code i need to write to perform the same. show me how to do this kind of conditional validation by adding jquery rules. thanks</p>