title: Show textbox on drop down select and Validate
body: <p>I have a hidden div which has textbox which becomes visible when "<strong>other</strong>" is selected from the drop down list. </p>
  
  <p>What I am trying to do is validate it. 
  When <strong>other</strong> is selected it should validate the textbox field and not let the form submit. </p>
  
  <p>I already tried but does not allow to submit form, when the text box is hidden. </p>
  
  <pre><code>function validateForm()
  {
  var x=document.forms["form1"]["textbox"].value;
  if (x==null || x=="")
  {
  alert("Text box be filled out");
  return false;
  }
  }
  </code></pre>
  
  <p>What Can I do to validate the textbox field only when <strong>other</strong> is selected and not validate when <strong>other</strong> is not selected and text box is hidden</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;head&gt;
  &lt;script src="../Library/jqueryLatest.js"&gt;&lt;/script&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form action="index.cfm" method="post" name="form1"&gt; 
  &lt;select name="description" id="description"&gt;
  &lt;option value="Type 1"&gt;Type 1&lt;/option&gt;
  &lt;option value="Type 2"&gt;Type 2&lt;/option&gt;
  &lt;option value="Type 3"&gt;Type 3&lt;/option&gt;
  &lt;option value="Other"&gt;Other&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="Other" class="showother" style="display:none"&gt;Hello &lt;input name="textbox" id="textbox" type="text"&gt;
  &lt;/div&gt;
  &lt;input name="submit" value="SUBMIT" type="submit"&gt;   
  &lt;/form&gt;
  
  &lt;/body&gt; 
  &lt;script type="text/javascript"&gt; 
  
  $(function () {
  $('#description').change(function () {
      $('.showother').hide();
      $('#' + $(this).val()).show();
  });
  });
  
  &lt;/script&gt;
  </code></pre>