An invalid form control with name is not focusable

Question

In Google Chrome some customers are not able to proceed to my payment page  When trying to submit a form I get this error   An invalid form control with name    is not focusable   This is from the JavaScript console  I read that the problem could be due to hidden fields having the required attribute  Now the problem is that we are using  net webforms required field validators  and not the html5 required attribute  It seems random who gets this error  Is there anyone who knows a solution for this

User · Answer

If you have any field with required attribute which is not visible during the form submission  this error will be thrown  You just remove the required attribute when your try to hide that field  You can add the required attribute in case if you want to show the field again  By this way  your validation will not be compromised and at the same time  the error will not be thrown

User · Answer

Yea   If a hidden form control has required field then it shows this error  One solution would be to disable this form control  This is because usually if you are hiding a form control it is because you are not concerned with its value  So this form control name value pair wont be sent  while submitting the form

User · Answer

There are many ways to fix this like   Add novalidate to your form but its totally wrong as it will remove form validation which will lead to wrong information entered by the users     lt form action        class  payment-details  method  post  novalidate gt    Use can remove the required attribute from required fields which is also wrong as it will remove form validation once again   Instead of this      lt input class  form-control  id  id line1  maxlength  255  name  line1  placeholder  First line of address  type  text  required  required  gt      Use this     lt input class  form-control  id  id line1  maxlength  255  name  line1  placeholder  First line of address  type  text  gt    Use can disable the required fields when you are not going to submit the form instead of doing some other option  This is the recommended solution in my opinion   like     lt input class  form-control  id  id line1  maxlength  255  name  line1  placeholder  First line of address  type  text  disabled  disabled  gt   or disable it through javascript   jquery code dependes upon your scenario

User · Answer

Not just only when specify required  I also got this issue when using min and max e g    lt input type  number  min  1900  max  2090    gt    That field can be hidden and shown based on other radio value  So  for temporary solution  I removed the validation

User · Answer

Alternatively another and foolproof answer is to use HTML5 Placeholder attribute then there will be no need to use any js validations     lt input id  elemID  name  elemName  placeholder  Some Placeholder Text  type  hidden  required  required  gt    Chrome will not be able to find any empty  hidden and required elements to focus on  Simple Solution    Hope that helps  I am totally sorted with this solution

User · Answer

This issue occurs on Chrome if a form field fails validation  but due to the respective invalid control not being focusable the browser s attempt to display the message  quot Please fill out this field quot  next to it fails as well  A form control may not be focusable at the time validation is triggered for several reasons  The two scenarios described below are the most prominent causes   The field is irrelevant according to the current context of the business logic  In such a scenario  the respective control should be disabled or removed from the DOM or not be marked with the required attribute at that point   Premature validation may occur due to a user pressing ENTER key on an input  Or a user clicking on a button input control in the form which has not defined the type attribute of the control correctly  If the type attribute of a button is not set to button  Chrome  or any other browser for that matter  performs a validation each time the button is clicked because submit is the default value of a button s type attribute    To solve the problem  if you have a button on your page that does something else other than submit or reset  always remember to do this   lt button type  quot button quot  gt   Also see https   stackoverflow com a 7264966 1356062

User · Answer

I have seen this question asked often and have come across this  error  myself   There have even been links to question whether this is an actual bug in Chrome  This is the response that occurs when one or more form input type elements are hidden and these elements have a min max limit  or some other validation limitation  imposed    On creation of a form  there are no values attributed to the elements  later on the element values may be filled or remain unchanged   At the time of submit  the form is parsed and any hidden elements that are outside of these validation limits will throw this  error  into the console and the submit will fail   Since you can t access these elements  because they are hidden  this is the only response that is valid   This isn t an actual fault nor bug   It is an indication that there are element values about to be submitted that are outside of the limits stipulated by one or more elements   To fix this  assign a valid default value to any elements that are hidden in the form at any time before the form is submitted  then these  errors  will never occur   It is not a bug as such  it is just forcing you into better programming habits   NB  If you wish to set these values to something outside the validation limits then use form addEventListener  submit   myFunction  to intercept the  submit  event and fill in these elements in  myFunction    It seems the validation checking is performed before  myFunction   is called

User · Answer

Let me put state my case since it was different from all the above solutions  I had an html tag that wasn t closed correctly  the element was not required  but it was embedded in a hidden div  the problem in my case was with the type  datetime-local   which was -for some reason- being validated at form submission    i changed this   lt input type  datetime-local    gt    into that   lt input type  text    gt

User · Answer

I wanted to answer here because NONE of these answers  or any other Google result solved the issue for me   For me it had nothing to do with fieldsets or hidden inputs    I found that if I used max  5   e g   it would produce this error  If I used maxlength  5       no error    I was able to reproduce the error and clearing of error several times   I still do not know why using that code produces the error  as far as this states it should be valid  even without a  min  I believe

User · Answer

There are things that still surprises me    I have a form with dynamic behaviour for two different entities  One entity requires some fields that the other don t  So  my JS code  depending on the entity  does something like      periodo   removeAttr  required        periodo-container   hide     and when the user selects the other entity      periodo-container   show        periodo   prop  required   true    But sometimes  when the form is submitted  the issue apppears   An invalid form control with name periodo   is not focusable  i am using the same value for the id and name    To fix this problem  you have to ensurance that the input where you are setting or removing  required  is always visible   So  what I did is       periodo-container   show      for making sure it is visible     periodo   removeAttr  required         periodo-container   hide      then hide   Thats solved my problem    unbelievable

User · Answer

Yet another possibility if you re getting the error on a checkbox input  If your checkboxes use custom CSS which hides the default and replaces it with some other styling  this will also trigger the not focusable error in Chrome on validation error   I found this in my stylesheet   input type  checkbox         visibility  hidden      Simple fix was to replace it with this   input type  checkbox         opacity  0

User · Answer

For Angular use    ng-required  boolean    This will only apply the html5  required  attribute if the value is true     lt input ng-model  myCtrl item  ng-required  myCtrl items  gt  0    gt

User · Answer

For other AngularJS 1 x users out there  this error appeared because I was hiding a form control from displaying instead of removing it from the DOM entirely when I didn t need the control to be completed   I fixed this by using ng-if instead of ng-show ng-hide on the div containing the form control requiring validation   Hope this helps you fellow edge case users

User · Answer

It will show that message if you have code like this    lt form gt     lt div style  display  none   gt       lt input name  test  type  text  required  gt     lt  div gt      lt input type  submit   gt   lt  form gt

User · Answer

You may try  removeAttribute  required   for those elements which are hidden at the time of window load  as it is quite probable that the element in question is marked hidden due to javascript  tabbed forms   e g   if document getElementById  hidden field choice selector parent element  value  true       document getElementById  hidden field   removeAttribute  required                This should do the task    It worked for me    cheers

User · Answer

Its because there is a hidden input with required attribute in the form   In my case  I had a select box and it is hidden by jquery tokenizer using inline style  If I dont select any token  browser throws the above error on form submission   So  I fixed it using the below css technique      select download tag       display  block  important   because otherwise  its throwing error An invalid form control with name  download tag 0     is not focusable        So  instead set opacity     opacity  0      height  0px

User · Answer

In case anyone else has this issue  I experienced the same thing  As discussed in the comments  it was due to the browser attempting to validate hidden fields  It was finding empty fields in the form and trying to focus on them  but because they were set to display none   it couldn t  Hence the error   I was able to solve it by using something similar to this      body   on  submit     myForm   function evt            Disable things that we don t want to validate          input hidden  textarea hidden  select hidden    attr  disabled   true           If HTML5 Validation is available let it run  Otherwise prevent default      if  this el checkValidity  amp  amp   this el checkValidity                 Re-enable things that we previously disabled              input hidden  textarea hidden  select hidden    attr  disabled   false           return true            evt preventDefault            Re-enable things that we previously disabled          input hidden  textarea hidden  select hidden    attr  disabled   false           Whatever other form processing stuff goes here        Also  this is possibly a duplicate of  quot Invalid form control quot  only in Google Chrome

User · Answer

It can be that you have hidden  display  none  fields with the required attribute   Please check all required fields are visible to the user

User · Answer

I received the same error when cloning an HTML element for use in a form    I have a partially complete form  which has a template injected into it  and then the template is modified   The error was referencing the original field  and not the cloned version   I couldn t find any methods that would force the form to re-evaluate itself  in the hope it would get rid of any references to the old fields that now don t exist  before running the validation   In order to get around this issue  I removed the required attribute from the original element and dynamically added it to the cloned field before injecting it into the form  The form now validates the cloned and modified fields correctly

User · Answer

I came here to answer that I had triggered this issue myself based on NOT closing the  lt  form gt  tag AND having multiple forms on the same page   The first form will extend to include seeking validation on form inputs from elsewhere   Because THOSE forms are hidden  they triggered the error  so for instance   lt form method  quot POST quot  name  register  action  quot  handler quot  gt     lt input type  quot email quot  name  quot email quot   gt   lt input type  quot text quot  name  quot message quot    gt   lt input type  quot date quot  name  quot date quot    gt    lt form method  quot POST quot  name  register  action  quot  register quot  gt   lt input type  quot text quot  name  quot userId quot    gt   lt input type  quot password quot  name  quot password quot    gt   lt input type  quot password quot  name  quot confirm quot    gt    lt  form gt   Triggers  An invalid form control with name  userId  is not focusable  An invalid form control with name  password  is not focusable  An invalid form control with name  confirm  is not focusable

User · Answer

Make sure that all of the controls in your form with the required attribute also have the name attribute set

User · Answer

Not only required field as mentioned in other answers  Its also caused by placing a  lt input gt  field in a hidden  lt div gt  which holds a invalid value  Consider below example   lt div style  quot display none  quot  gt      lt input type  quot number quot  name  quot some quot  min  quot 1 quot  max  quot 50 quot  value  quot 0 quot  gt   lt  div gt    This throws the same error  So make sure the  lt input gt  fields inside hidden  lt div gt  doesnt hold any invalid value

User · Answer

I found same problem when using Angular JS  It was caused from using required together with ng-hide  When I clicked on the submit button while this element was hidden then it occurred the error An invalid form control with name    is not focusable  finally      For example of using ng-hide together with required    lt input type  text  ng-hide  for some condition  required something  gt    I solved it by replacing the required with ng-pattern instead   For example of solution    lt input type  text  ng-hide  for some condition  ng-pattern  some thing   gt

User · Answer

It s weird how everyone is suggesting to remove the validation  while validation exists for a reason    Anyways  here s what you can do if you re using a custom control  and want to maintain the validation  1st step  Remove display none from the input  so the input becomes focusable  input required    textarea required        display  inline-block  important      height  0  important      padding  0  important      border  0  important      z-index  -1  important      position  absolute  important     2nd step  Add invalid event handler on the input to for specific cases if the style isn t enough attrTermsInput addEventListener  invalid   function e        if it s valid  cancel the event    if e target value           e preventDefault

User · Answer

For me this happens  when there s a  lt select gt  field with pre-selected option with value of       lt select name  foo  required  required  gt       lt option value    selected  selected  gt Select something lt  option gt       lt option value  bar  gt Bar lt  option gt       lt option value  baz  gt Baz lt  option gt   lt  select gt    Unfortunately it s the only cross-browser solution for a placeholder  How do I make a placeholder for a   39 select  39  box     The issue comes up on Chrome 43 0 2357 124

User · Answer

In your form  You might have hidden input having required attribute     lt input type  hidden  required   gt   lt input type  file  required style  display  none    gt    The form can t focus on those elements  you have to remove required from all hidden inputs  or implement a validation function in javascript to handle them if you really require a hidden input

User · Answer

For Select2 Jquery problem   The problem is due to the HTML5 validation cannot focus a hidden invalid element   I came across this issue when I was dealing with jQuery Select2 plugin    Solution You could inject an event listener on and  invalid  event of every element of a form so that you can manipulate just before the HTML5 validate event      form select   each function i   this addEventListener  invalid   function e                       var  s2Id    s2id   e target id    s2 autosuggest html ul li element id         var  posS2          s2Id  position              get the current position of respective select2                s2Id   ul   addClass   invalid      add this class with border 1px solid red            this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index   -1               e target id  attr  style   display block  important position absolute z-index -1 top     posS2 top-       s2Id  outerHeight  -24   px left     posS2 left-        s2Id  width   2    px                          Adjust the left and top position accordingly                       remove invalid class after 3 seconds         setTimeout function                       s2Id   ul   removeClass   invalid              3000                       return true     false

User · Answer

Another possible cause and not covered in all previous answers when you have a normal form with required fields and you submit the form then hide it directly after submission  with javascript  giving no time for validation functionality to work   The validation functionality will try to focus on the required field and show the error validation message but the field has already been hidden  so  An invalid form control with name    is not focusable   appears   Edit   To handle this case simply add the following condition inside your submit handler  submitHandler         const form   document body querySelector   formId            Fix issue with html5 validation     if  form checkValidity  amp  amp   form checkValidity            return                Submit and hide form safely       Edit  Explanation  Supposing you re hiding the form on submission  this code guarantees that the form fields will not be hidden until form become valid  So  if a field is not valid  the browser can focus on it with no problems as this field is still displayed

User · Answer

I came here with the same problem  For me  injecting hidden elements as needed - i e  education in a job app  had the required flags   What I realized was that the validator was firing on the injected faster than the document was ready  thus it complained    My original ng-required tag was using the visibility tag  vm flags hasHighSchool     I resolved by creating a dedicated flag to set required ng-required  vm flags highSchoolRequired    true   I added a 10ms callback on setting that flag and the problem was solved    vm hasHighSchool   function  attended             vm flags hasHighSchool   attended          applicationSvc hasHighSchool attended  vm application           setTimeout function                  vm flags highSchoolRequired   true              10           Html    lt input type  text  name  vm application highSchool name  data-ng-model  vm application highSchool name  class  form-control  placeholder  Name    ng-required  vm flags highSchoolRequired    true    gt  lt  div gt

User · Answer

This error happened to me because I was submitting a form with required fields that were not filled   The error was produced because the browser was trying to focus on the required fields to warn the user the fields were required but those required fields were hidden in a display none div so the browser could not focus on them  I was submitting from a visible tab and the required fields were in an hidden tab  hence the error   To fix  make sure you control the required fields are filled

User · Answer

None of the previous answers worked for me  and I don t have any hidden fields with the required attribute   In my case  the problem was caused by having a  lt form gt  and then a  lt fieldset gt  as its first child  which holds the  lt input gt  with the required attribute  Removing the  lt fieldset gt  solved the problem  Or you can wrap your form with it  it is allowed by HTML5   I m on Windows 7 x64  Chrome version 43 0 2357 130 m

User · Answer

In my case the problem was with the input type  radio  required being hidden with   visibility  hidden   This error message will also show if the required input type radio or checkbox has a display  none  CSS property    If you want to create custom radio checkbox inputs where they must be hidden from the UI and still keep the required attribute  you should instead use the    opacity  0  CSS property

User · Answer

Adding a novalidate attribute to the form will help    lt form name  myform  novalidate gt

User · Answer

My scenario I hope not missed in this lengthy seed of answers was something really odd   I have div elements that dynamically update through a dialogBox being called in them to load and get actioned in   In short the div ids had    lt div id  name  instance username    gt    I had a user         and for some reason the encoding did some strange stuff in the java script world  I got this error message for a form working in other places   Narrowed it down to this and a retest of using numeric numbers instead i e id appears to fix the issue

User · Answer

In my case    ng-show was being used  ng-if was put in its place and fixed my error

[html] An invalid form control with name='' is not focusable

Examples related to html

Examples related to validation