Skip to main content

How to Resolve "An invalid form control with name='X' is not focusable" Error in JavaScript

The Chrome browser error "An invalid form control with name='X' is not focusable." is a common but often confusing issue. It occurs when a form is submitted, a field with the required attribute is empty (or invalid), but the browser cannot bring that field into view to show the user where the problem is. This typically happens when the invalid field is hidden.

This guide will break down the common causes of this error and provide several clear, step-by-step solutions, from fixing the visibility of the field to disabling browser-native validation entirely.

Understanding the Root Cause: Invalid and Un-focusable​

This error is triggered by a combination of two conditions:

  1. An invalid field: A form field fails the browser's built-in HTML5 validation. The most common reason is an input with the required attribute that has been left empty.
  2. An un-focusable field: The browser tries to shift focus to the invalid field to display a validation message (like "Please fill out this field"), but it can't because the element is not visible in the DOM.

The most common reason a field is un-focusable is because it has been hidden with CSS, typically using display: none;.

Example of the error:

<style>
  #hidden-field {
    display: none;
  }
</style>

<form>
  <!-- This field is required but cannot be seen or focused. -->
  <input type="text" id="hidden-field" name="secret" required />
  
  <button type="submit">Submit</button>
</form>

When the user clicks "Submit," the browser sees that #hidden-field is required but empty. It tries to focus on it to show an error, fails because it's invisible, and throws the "not focusable" error in the console.

Solution 1 (Most Common): Removing required from a Hidden Field​

The simplest and most direct solution is to remove the required attribute from any form field that is intentionally hidden with display: none;. An invisible field cannot be filled out by a user, so it should not be required.

Example of the code with error:

<!-- This input is hidden via CSS but is still required -->
<input type="text" id="message" name="message" style="display: none;" required />

Solution (in HTML)​

Simply remove the required attribute.

<input type="text" id="message" name="message" style="display: none;" />

Solution (in JavaScript)​

If you can't edit the HTML directly, you can remove the attribute with JavaScript.

// Find the element by its name, which is provided in the error message
const hiddenField = document.querySelector("[name='message']");

if (hiddenField) {
  hiddenField.removeAttribute('required');
}

Solution 2: Changing How the Field is Hidden​

If you need a field to be required but also invisible (a less common scenario), you cannot use display: none;. Instead, you can hide it visually while keeping it "focusable" by the browser.

The solution is to use CSS to hide the element in a way that keeps it in the layout.

.visually-hidden {
  opacity: 0;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

Applying this class to an input will make it invisible to the user, but the browser can still focus it to display a validation message if needed (though the message itself may not be visible).

Solution 3: Disabling Browser Validation with novalidate​

If you are implementing your own validation logic in JavaScript and want to completely prevent the browser's default validation behavior, you can add the novalidate attribute to your <form> element.

<form novalidate>
  <!-- All fields inside this form will no longer be validated by the browser -->
  <input type="text" id="hidden-field" name="secret" required />
  
  <button type="submit">Submit</button>
</form>
note

This is a good solution if you want to take full control of form validation and error messaging.

How to Handle Programmatically Set Invalid Values​

The error can also occur if you use JavaScript to set a value on a hidden field that violates its constraints.

Example of the error:

<input type="number" id="age" name="age" min="18" style="display: none;">

<script>
  // This value is invalid because the minimum is 18.
  document.getElementById('age').value = 10;
</script>
note

When the form is submitted, the browser will see the invalid value 10 and try to focus the hidden field, causing the error.

Solution: Ensure that any value you set programmatically is valid according to the field's constraints (min, max, pattern, etc.), or use one of the other solutions to remove the validation.

Conclusion​

The "An invalid form control... is not focusable" error is a clear signal of a conflict between browser validation and an element's visibility.

To fix it, choose one of these solutions:

  • Remove the required attribute from any form field that is hidden with display: none;. This is the most common and direct fix.
  • Change the CSS used to hide the element to something like opacity: 0; if it must remain in the DOM for some reason.
  • Add the novalidate attribute to your <form> tag to disable all native browser validation for that form.

Table of Contents