title: Perform validation based on the visibility of radio buttons
body: <p>I have a Form which has 2 fields to validate, Radio buttons and Textarea.</p>
  
  <p>The rules for validation are</p>
  
  <ul>
  <li>At least 1 radio must be checked</li>
  <li>The textarea should not be empty.</li>
  </ul>
  
  <p>Here is the <a href="http://jsfiddle.net/w26xk/" rel="nofollow">DEMO</a> of my code.</p>
  
  <p>The issue is that the visibility of "Radio" buttons are conditional and they might be hidden in some scenario.</p>
  
  <p>So. currently if the Radio buttons are hidden I'm not able to submit the <code>&lt;form&gt;</code>.</p>
  
  <p>Should I do the Form validation twice as shown below? Or is there a better and shorter way of doing this validation?</p>
  
  <pre><code>if (Radio is : visible){ 
    Here goes the validation for both form fields
  } else{
    Do the Validation again only for Textarea
  }
  </code></pre>
  
  <p>Following is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;input class="redButton" id="openDialogButton" type="button" value="Open Dialog"&gt;
      &lt;div id="sessionReason" title="End Transaction"&gt;
          &lt;p class="validation-summary-errors marginBottom10"&gt;Provide the following information to proceed:&lt;/p&gt;
          &lt;div class="marginBottom" id="sessionDocumentMessage"&gt;
              &lt;label class="marginBottom5 marginTop10"&gt;Return the document?&lt;/label&gt;
              &lt;br&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="sessionDocuments" /&gt;Return&lt;/label&gt;
              &lt;br&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="sessionDocuments" /&gt;Keep&lt;/label&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;p class="marginBottom5" id="sessionReasonMessage"&gt;Reason for ending the transaction:&lt;/p&gt;
          &lt;textarea id="sessionReasonBox" class="reasonBox"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>    function showValidationError() {
          $('#sessionReason .validation-summary-errors').show();
      }
  
      function hideValidationError() {
          $('#sessionReason .validation-summary-errors').hide();
      }
  
      function addRadioError() {
          $("#sessionDocumentMessage label").addClass("redtext");
      }
  
      function removeRadioError() {
          $("#sessionDocumentMessage label").removeClass("redtext");
      }
  
      function addReasonBoxError() {
          $("#sessionReasonMessage").addClass("redtext");
  
      }
  
      function removeReasonBoxError() {
          $("#sessionReasonMessage").removeClass("redtext");
      }
  
      $('#sessionReason .validation-summary-errors').hide();
      $("#sessionReason").dialog({
          autoOpen: false,
          buttons: {
              "Submit": function () {
                  var enteredReason = $('#sessionReasonBox').val();
                  var radioChecked = $("#sessionReason input:radio[name='sessionDocuments']:checked");
  
                  if ((enteredReason.length &lt;= 0) &amp;&amp; (radioChecked.length == 0)) {
                      //Show Error
                      showValidationError();
                      addReasonBoxError();
                      addRadioError();
                      //Hide Validation Error
                  } else if ((enteredReason.length &gt; 0) &amp;&amp; (radioChecked.length == 0)) {
                      //Show Validation Error
                      showValidationError();
                      addRadioError();
                      //Hide Validation Error
                      removeReasonBoxError();
                  } else if ((enteredReason.length &lt;= 0) &amp;&amp; (radioChecked.length &gt; 0)) {
                      //Show Validation Error
                      showValidationError();
                      addReasonBoxError();
                      //Hide Validation Error
                      removeRadioError();
                  } else {
                      $(this).dialog("close");
                      //Hide Validation Error
                      hideValidationError();
                      removeRadioError();
                      removeReasonBoxError();
                  }
              },
                  "Cancel": function () {
                  $(this).dialog("close");
              }
          }
      });
  
  
  
      $("#openDialogButton").click(function () {
          $('#sessionReasonBox').val("");
          $('#sessionDocumentMessage input:radio').removeAttr('checked');
          $("#sessionReason").dialog("open");
          //Hide Validation Error
          hideValidationError();
          removeRadioError();
          removeReasonBoxError();
      });
  </code></pre>
  
  <p>Let me know if you need any other information.</p>
  
  <p>Please suggest.</p>