title: conditional validation of textbox based on dropdown
body: <p>I am working on asp.net mvc website and I have 4 <code>dropdowns</code> and 4 <code>textboxes</code> like this:</p>
  
  <pre><code>dialprefix1   callfromnumber1
  dialprefix2   callfromnumber2
  dialprefix3   callfromnumber3
  dialprefix4   callfromnumber4
  </code></pre>
  
  <p>I want to group each row so that if value in <code>dialprefix1</code> is <code>44</code> then <code>callfromnumber1</code> has length 10. Means I want to perform validation of <code>textbox</code> based on <code>dropdown</code> and there are multiple rows.</p>
  
  <p>I have used this to allow numeric in textboxes</p>
  
  <pre><code>$(".phone").keydown(function (event) {
      // Allow: backspace, delete, tab, escape, and enter
      if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
              // Allow: Ctrl+A
              (event.keyCode == 65 &amp;&amp; event.ctrlKey === true) ||
              // Allow: home, end, left, right
              (event.keyCode &gt;= 35 &amp;&amp; event.keyCode &lt;= 39)) {
              // let it happen, don't do anything
          return;
      } else {
          // Ensure that it is a number and stop the keypress
          if (event.shiftKey || (event.keyCode &lt; 48 || event.keyCode &gt; 57) &amp;&amp; (event.keyCode &lt; 96 || event.keyCode &gt; 105)) {
          event.preventDefault();
          }
      }
  });
  </code></pre>
  
  <p>and I am validating length like this:</p>
  
  <pre><code>$("#DefaultCallFrom1").keypress(function () {
      if ($("#Dialprefix1").val() == "44") {
          if (this.value.substring(0, 1) == "0" &amp;&amp; this.value.length == "10") {
              displayAlertMessage("You can not enter more characters");
              this.value.length &lt;= 10
          }
          else {
              displayAlertMessage("You can not enter more characters");
              this.value.length &lt;= 9
          }
      }
  })
  
  $("#DefaultCallFrom2").keypress(function () {
      if ($("#Dialprefix2").val() == "44") {
          if (this.value.substring(0, 1) == "0")
              return this.value.length &lt;= 10
          else
              return this.value.length &lt;= 9
      }
  })
  </code></pre>
  
  <p>1) I want to combine these based on class all textbox has class = phone and all dropdowns has class dialprefix.</p>
  
  <p>2). I want to make sure that number starts with 0,1,2,7,8 if related dropdown selected value is 44</p>
  
  <p>The markup looks like this:</p>
  
  <pre><code>&lt;td style="padding-left: 1px"&gt;
  
  &lt;input type="text" value="1" readonly="readonly" name="srNo" id="srNo" disabled="disabled" class="tiny" style="text-align:right"&gt;
  &lt;select name="Dialprefix1" id="Dialprefix1" class="dialprefix"&gt;
      &lt;option value="44"&gt;+44&lt;/option&gt;
      &lt;option value="001"&gt;+001&lt;/option&gt;
      &lt;option value="11" selected="selected"&gt;+11&lt;/option&gt;
      &lt;option value="12"&gt;+12&lt;/option&gt;
      &lt;option value="13"&gt;+13&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;span class="watermark_container" style="display: inline-block; position: relative;"&gt;
  &lt;span class="watermark" style="position: absolute; display: block; font-family: MS Shell Dlg; font-size: 13.3333px; color: rgb(153, 153, 153); left: 4px; top: 0px; height: 20px; line-height: 20px; text-align: left; pointer-events: none; opacity: 0.6;"&gt;
      Click here to add your phone number.
  &lt;/span&gt;
  &lt;input type="text" value="" title="Click here to add your phone number." name="DefaultCallFrom1" id="DefaultCallFrom1" class="textarea normal jq_watermark phone" autocomplete="off" data-jq-watermark="processed"&gt;
  &lt;/span&gt;
  &lt;br&gt;
  
  &lt;input type="text" value="2" readonly="readonly" name="srNo" id="srNo" disabled="disabled" class="tiny" style="text-align:right"&gt;
  &lt;select name="Dialprefix2" id="Dialprefix2" class="dialprefix"&gt;
      &lt;option value="44"&gt;+44&lt;/option&gt;
      &lt;option value="001"&gt;+001&lt;/option&gt;
      &lt;option value="11" selected="selected"&gt;+11&lt;/option&gt;
      &lt;option value="12"&gt;+12&lt;/option&gt;
      &lt;option value="13"&gt;+13&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;span class="watermark_container" style="display: inline-block; position: relative;"&gt;
  &lt;span class="watermark" style="position: absolute; display: block; font-family: MS Shell Dlg; font-size: 13.3333px; color: rgb(153, 153, 153); left: 4px; top: 0px; height: 20px; line-height: 20px; text-align: left; pointer-events: none;"&gt;
      Click here to add your phone number.
  &lt;/span&gt;
  &lt;input type="text" value="" title="Click here to add your phone number." name="DefaultCallFrom2" id="DefaultCallFrom2" class="textarea normal jq_watermark phone" autocomplete="off" data-jq-watermark="processed"&gt;
  &lt;/span&gt;
  &lt;br&gt;
  </code></pre>