html - 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 this error message duplicated first on a well pointed input, this input has no required attribute: The code:

<fieldset>
    <label>Total (montaje incl.)</label>
    <input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>

The error: An invalid form control with name='priceFinal' is not focusable.

While the user is filling the form this field gets its value by a js script with jquery. The user type a size in another input, the script do its maths with the size value and then put the outcome in the 'priceFinal' input with the jquery function: .val()

In the browser we can see that the input is correctly filled and no errors are displayed at that time. And with the 'novalidate' solution everything goes fine, so it couldn't be responsible for the nofocusable error, I think.

Then I got the same error with an input with no name which I didn't write and doesn't exist in my DOM:

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

This is weird because the only input without name in my form is the type:submit one

<input type="submit" class="btn btn-default" value="Ver presupuesto" />

I have a few required fields but I've always checked that their are all filled when I send the form. I paste it just in case it could help:

<fieldset>
    <input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos"  class="cInput" required >
    <input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
    <input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>

<fieldset>
    <input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
    <input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required> 
</fieldset>

The novalidate solution clears the error but it doesn't fix it, I mean there must be a way to solve it with no hacks.

Any one have any idea of what's might going on? Thanks

Answer 1

I had the same problem, and everyone was blaming to the poor hidden inputs been required, but seems like a bug having your required field inside a fieldset. Chrome tries to focus (for some unknown reason) your fieldset instead of your required input.

This bug is present only in chrome I tested in version 43.0.2357.124 m. Doesn't happen in firefox.

Example (very simple).

<form>
  <fieldset name="mybug">
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>