An invalid form control with name...is not focusable

Question

An invalid form control with name='additional_here_about_other_field' is not focusable. This code is for a select field with four dropdowns. A couple of the options are to be required: #additional_here_about_other_field and the #additional_who_is_your_orthodontist_field. 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?

jQuery(document).ready(function () {
 
 if(jQuery("#additional_here_about_other_field").length > 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 > 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(); }
  });
 }
});

HTML snippet

<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?" >
 <option value=""  selected='selected'></option>
 <option value="Patient" >Patient</option>
 <option value="Orthodontist Referral" >Orthodontist Referral</option>
 <option value="Trade Show" >Trade Show</option>
 <option value="Mailer" >Mailer</option>
 <option value="Other (please specify)" >Other (please specify)</option>
</select>

<div class="clear"></div>
<p>  
 <input type="text" class="input-text " name="additional_here_about_other_field" id="additional_here_about_other_field" placeholder="Other (please specify)"   value=""  />
</p>
<div class="clear"></div>
<p>  
 <input type="text" class="input-text " name="additional_who_is_your_orthodontist" id="additional_who_is_your_orthodontist" placeholder="Who is your orthodontist?"   value=""  />
</p>
<div class="clear"></div>

for those finding this error message search result with custom elements and form participation there may be a solution at https://stackoverflow.com/a/69684377 — jimmont, Oct 23 '21 at 01:37

score 32 · Accepted Answer · answered Feb 17 '17 at 18:05

32

Just because a form control is hidden doesn't mean it isn't required. And since it is required, but hidden the browser can't focus the form control.

Every place you have .hide() change it to .hide().prop('required',false) to fix your problem.

answered Feb 17 '17 at 18:05

bassxzero

4,838
22
34

1

What if you have multiple tabs in a form (for multiple languages). How can you fix this? There are 6 inputs per language, so simply displaying them in 1 form would make it very long. – nclsvh Oct 25 '17 at 11:26
1

@nclsvh you would have to implement the form validation yourself instead of relying on the browser for validation. I prefer this method because it standardizes the user experience across all browsers. – bassxzero Oct 25 '17 at 11:34
True, and having `` wil only hide the input, not the label and related stuff around. This sucks! – nclsvh Oct 25 '17 at 11:37
Make sense! It should remove the required attribute right away if you are hiding the controls and mark it as required. – Shashank Shah Feb 16 '22 at 14:50

score 4 · Answer 2 · answered Oct 07 '19 at 18:25

4

Remove "required" from the field, and use a javascript logic to see if it has been required or not.

answered Oct 07 '19 at 18:25

Brennan James

332
2
7

score 0 · Answer 3 · answered Oct 08 '20 at 04:52

First, remove "required" from the field. Then use this jQuery code:

$('#your_input_or_select_id').prop('required',true);   //use this to add required while document ready
$('#your_input_or_select_id').removeAttr('required'); //use this to remove required whenever you want

An invalid form control with name...is not focusable

3 Answers3

Linked