title: Dynamic form field validation using jquery AND Rules
body: <p>This question is an extension of my SO question:</p>
  
  <p><a href="https://stackoverflow.com/questions/13992834/jquery-to-disable-enable-textarea-depending-on-which-radio-button-is-selected-in#13993147">jQuery to disable/enable textarea depending on which radio button is selected inside of loop</a></p>
  
  <p>I'm using the jQuery bassistance validation plugin (<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow noreferrer">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a>).</p>
  
  <p>The validation rule I'm trying to create is if a radio button equals 'yes', then make the textarea a required field.  My ID's and form field names for the radio and textarea boxes are dynamic but begin with the same word so I can use <code>name^='travel'</code></p>
  
  <p><strong>HTML</strong>
  <strong>UPDATED</strong></p>
  
  <pre><code>&lt;div class="controls"&gt;
      &lt;label class="radio inline"&gt;
          &lt;input type="radio" name="travel_1" data-travelNumber="1" id="travel_yes_1" value="Yes" tabindex="25" &gt;
          Yes &lt;/label&gt;
      &lt;label class="radio inline"&gt;
          &lt;input name="travel_1" type="radio" data-travelNumber="1" id="travel_no_1" value="No" tabindex="26" checked &gt;
          No &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="controls" id="Answer_travel_yes_1"&gt;
      &lt;textarea name="travelDetails_1" id="travelDetails_1" &gt;&lt;/textarea&gt;
  &lt;/div&gt;
  
  &lt;div class="controls"&gt;
      &lt;label class="radio inline"&gt;
          &lt;input type="radio" name="travel_2" data-travelNumber="2" id="travel_yes_2" value="Yes" tabindex="25" &gt;
          Yes &lt;/label&gt;
      &lt;label class="radio inline"&gt;
          &lt;input name="travel_2" type="radio" data-travelNumber="2" id="travel_no_2" value="No" tabindex="26" checked &gt;
          No &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="controls" id="Answer_travel_yes_2"&gt;
      &lt;textarea name="travelDetails_2" id="travelDetails_2"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  
  
  &lt;div class="controls"&gt;
      &lt;label class="radio inline"&gt;
          &lt;input type="radio" name="travel_3" data-travelNumber="3" id="travel_yes_3" value="Yes" tabindex="25" &gt;
          Yes &lt;/label&gt;
      &lt;label class="radio inline"&gt;
          &lt;input name="travel_3" type="radio" data-travelNumber="3" id="travel_no_3" value="No" tabindex="26" checked &gt;
          No &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="controls" id="Answer_travel_yes_3"&gt;
      &lt;textarea name="travelDetails_3" id="travelDetails_3"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>//  I use this to hide/show the travelDetails textarea (show on yes, hide on no)
  $('input:radio[name^="travel"]:checked').live('click',function(){
      var id = $(this).attr("id").split("_");
      id = id[id.length-1];
      $("#travelDetails_" + id).attr("disabled", !($(this).val() == "Yes"));
      if ( $(this).val() == 'Yes' ) 
          $('#Answer_travel_yes_' + id).slideDown();
      else
          $('#Answer_travel_yes_' + id).slideUp();
  });
  
  
  $("#TravelForm").validate({
          rules:{
              whatgoeshere:{
                      required: function(){
                          if ( $("input:radio[name^=travel]:checked").val() == "Yes" ){
                              //  make travel
                              true
                          }
                          else{
                              console.log('false');
                              true
                          }
            },
                      minlength: 10   // needs to have at least 10 characters entered (if the corresponding radio is Yes
              }
          },
          messages:{
              whatgoeshere:{
                  required:"Please enter your travel details",
                  minlength:"Please enter at least 10 characters"
              }
          },
          errorClass: "help-inline",
          errorElement: "span",
          highlight:function(element, errorClass, validClass) {
              $(element).parents('.control-group').addClass('error');
          },
          unhighlight: function(element, errorClass, validClass) {
              $(element).parents('.control-group').removeClass('error');
              //  $(element).parents('.control-group').addClass('success');
          }
      });
  </code></pre>