title: Cascading Dropdown Validation: Second dropdown always validates after first is selected
body: <p>I have a simple set of cascading dropdowns which use jquery to validate.  They are both required.  </p>
  
  <p>If you leave them both un-selected and try to submit the form, they will both show as red and the form will not submit.  </p>
  
  <p>But, if you select a value in the <em>first</em> while leaving the <em>second</em> dropdown un-selected, and then submit the form, the form will submit and throw a server-side error because the second dropdown value, which is required, has not been selected.</p>
  
  <p>Here's the (stripped down) HTML with both un-selected:</p>
  
  <pre><code>&lt;form action="/Project/ProjectDocumentUpload" class="form-horizontal" enctype="multipart/form-data" method="post" onsubmit="return Validate('UploadFormModal');"&gt;
      &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputType"&gt;Phase&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;select id="PhaseDD" data-val="true" data-val-required="Select a Phase."&gt;
                  &lt;option value=""&gt;-Select-&lt;/option&gt;
                  &lt;option value="1"&gt;Planning&lt;/option&gt;
                  &lt;option value="2"&gt;Procurement&lt;/option&gt;
                  &lt;option value="3"&gt;Installation&lt;/option&gt;
                  &lt;option value="4"&gt;Closure&lt;/option&gt;
              &lt;/select&gt; &lt;span class="required"&gt;*&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group" style="float:left;"&gt;
          &lt;label class="control-label" for="inputType"&gt;Process&lt;/label&gt;
          &lt;div class="controls ProcessDD"&gt;
              &lt;select id="ProjectProcessTypeId" name="ProjectProcessTypeId" data-val="true" data-val-required="Select a Process"&gt;
                 &lt;option value=""&gt;-Select-&lt;/option&gt;
             &lt;/select&gt; &lt;span class="required"&gt;*&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
          &lt;input type="submit" value="Save changes" class="btn btn-primary disable-button-upon-submit"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And when I select a value in the first, the only thing that changes is the second dropdown now has values:</p>
  
  <pre><code>&lt;select id="ProjectProcessTypeId" name="ProjectProcessTypeId" data-val="true" data-val-required="Select a Process"&gt;
      &lt;option&gt;-Select-&lt;/option&gt; 
      &lt;option value="1"&gt;Kickoff&lt;/option&gt; 
      &lt;option value="2"&gt;Project Team Selection&lt;/option&gt; 
      &lt;option value="3"&gt;Define the Work&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>What am I missing here?  How can I get the second dropdown to validate?</p>
  
  <p>Thanks!</p>