An invalid form control with name='' is not focusable. WITHOUT ANY REQUIRED OR HIDDEN INPUTS

Question

I\'m facing the well known Chrome\'s \"not-focusable-input\" error but my situation is different from the explained in the other post I could find there.

I have thi

Answer 1

If you get the error when jQuery function is executed, try to put "return false" on your function, or function(e) { e.preventDefault(); ... }

Answer 2

i had this issue once. to fix it, add

novalidate

as an attribute to the form. e.g

<form action="" novalidate>
....
</form>

Answer 3

Nach gave me the best pointer... (y) I also had a input type="number" with step="0.1" and the console shows me this error while validating: An invalid form control with name='' is not focusable.

remove the step="0.1" on the element and now the form can be validated

Answer 4

Here is the solution....

<form>
  <input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>

Many people do not realize that passing false into ng-required disables the directive.

Answer 5

While I was writting the question I realized one thing: the value the script was putting into the 'priceFinal' field sometimes was a decimal number.

In this case the solution was to write the step attribute for this input:

... step="any" ...

Step on w3s

So this 'nofocusable' bug is not only a required and hidden fields issue, it's also generated by format conflicts.

Answer 6

Thanks to this post, I saw that my problem also rested with Chrome trying to focus on my fieldsets, instead of the input field.

To get a better response from the console:

• Assign every DOM element a new name
• Set every input & select style.display to 'block'

• Changed the type of input[type="hidden"] elements to 'text'

  function cleanInputs(){
      var inputs  = document.getElementsByTagName( 'input' ),
          selects = document.getElementsByTagName( 'select' ),
          all     = document.getElementsByTagName( '*' );
      for( var i=0, x=all.length; i<x; i++ ){
          all[i].setAttribute( 'name', i + '_test' );
      }
      for( var i=0, x=selects.length; i<x; i++ ){
          selects[i].style.display = 'block';
      }
      for( var i=0, x=inputs.length; i<x; i++ ){
          if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
              inputs[i].setAttribute( 'type', 'text' );
          }
          inputs[i].style.display = 'block';
      }
      return true;
  }
  

In the console, I ran cleanInputs() and then submitted the form. The result, from the console, was:

An invalid form control with name='28_test' is not focusable.

An invalid form control with name='103_test' is not focusable.

Then, switching over to the Web Developer "Elements" view, I was able to find "28_test" and "103_test" (both fieldsets) -- confirming that my problem was a required input field, nested inside a fieldset.