title: An invalid form control with name...is not focusable
body: <p><strong>An invalid form control with name='additional_here_about_other_field' is not focusable.</strong>
  This code is for a select field with four dropdowns. A couple of the options are to be required: <code>#additional_here_about_other_field</code> and the <code>#additional_who_is_your_orthodontist_field</code>. When a required field is selected, you have to enter additional data in another text field that will show/unhide. When you select a required option and then switch to an option which is required or not and try to submit the form, you get the is not focusable error. It seems when you select a required field and then switch to another field, the previous required field although now hidden is still waiting to be validated?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function () {
   
   if(jQuery("#additional_here_about_other_field").length &gt; 0){
    jQuery("#additional_here_about_other_field").hide();
    jQuery("#additional_how_did_u_hear_about_harp").change(function(){
     if(jQuery(this).val() == 'Other (please specify)'){ jQuery("#additional_here_about_other_field").show().prop('required',true); }
     else { jQuery("#additional_here_about_other_field").hide(); }
    });
   }
   if(jQuery("#additional_who_is_your_orthodontist").length &gt; 0){
    jQuery("#additional_who_is_your_orthodontist").hide();
    jQuery("#additional_how_did_u_hear_about_harp").change(function(){
     if(jQuery(this).val() == 'Orthodontist Referral'){ jQuery("#additional_who_is_your_orthodontist").show().prop('required',true); }
     else { jQuery("#additional_who_is_your_orthodontist").hide(); }
    });
   }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>HTML snippet
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name="additional_how_did_u_hear_about_harp" id="additional_how_did_u_hear_about_harp" class="select " data-allow_clear="true" data-placeholder="How Did You Hear About The Harp?" &gt;
   &lt;option value=""  selected='selected'&gt;&lt;/option&gt;
   &lt;option value="Patient" &gt;Patient&lt;/option&gt;
   &lt;option value="Orthodontist Referral" &gt;Orthodontist Referral&lt;/option&gt;
   &lt;option value="Trade Show" &gt;Trade Show&lt;/option&gt;
   &lt;option value="Mailer" &gt;Mailer&lt;/option&gt;
   &lt;option value="Other (please specify)" &gt;Other (please specify)&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;p&gt;  
   &lt;input type="text" class="input-text " name="additional_here_about_other_field" id="additional_here_about_other_field" placeholder="Other (please specify)"   value=""  /&gt;
  &lt;/p&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;p&gt;  
   &lt;input type="text" class="input-text " name="additional_who_is_your_orthodontist" id="additional_who_is_your_orthodontist" placeholder="Who is your orthodontist?"   value=""  /&gt;
  &lt;/p&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>