Understanding the Error: “An invalid form control is not focusable” in HTML Forms

When working with HTML5 forms, you may encounter a runtime validation error such as:

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

This error appears when the browser tries to focus a required form element that is hidden or not currently focusable. This is part of the browser’s automatic HTML5 constraint validation.

What the Error Means

Browsers validate required fields when a form is submitted. If a required field is empty or invalid, the browser attempts to:

1. Stop the form submission

2. Focus the first invalid input

3. Display the validation message

However, when the invalid input is hidden, disabled, or located in a non-visible tab or modal, the browser cannot focus it. This results in the error:

An invalid form control is not focusable.

Common Causes

1. Input Is Inside a Hidden Element

Examples include:

• display: none

• visibility: hidden

• Hidden Bootstrap modals

• Closed accordions or tabs

2. Using Tabs to Organize Forms

For example, a field inside an inactive Bootstrap tab:

<div class="tab-pane fade" id="seo" aria-hidden="true">
    <input required type="text" name="metaKeyword">
</div>

Because the tab is not active, the browser cannot focus the input.

3. JavaScript Dynamically Adds required

If a script adds required to an input that is not visible, it becomes impossible to focus.

4. Duplicate IDs or Incorrect DOM Targeting

If JavaScript attempts to focus an element that is not visible, this error may appear.

How to Fix the Error

Fix 1: Remove required from Hidden Fields

If a field is not always required:

$('input[required]').each(function () {
    if (!$(this).is(':visible')) {
        $(this).removeAttr('required');
    }
});

Fix 2: Ensure Validation Only Runs on Visible Tabs

Activate the correct tab before submission:

$('form').on('submit', function(e) {
    let invalid = this.querySelector(':invalid');
    if (invalid && !$(invalid).is(':visible')) {
        const tabId = $(invalid).closest('.tab-pane').attr('id');
        $('[data-bs-target="#' + tabId + '"]').tab('show');
    }
});

Fix 3: Keep Required Fields Visible

If a field must always be filled, ensure it is placed in a visible portion of the UI.

Fix 4: Conditional Required Rules

Add required only when the field is visible:

$("#seoTab").on('shown.bs.tab', function () {
    $('#metaKeyword, #metadesc').attr('required', true);
});

$("#seoTab").on('hidden.bs.tab', function () {
    $('#metaKeyword, #metadesc').removeAttr('required');
});

Summary

To prevent this error, ensure that required inputs are visible and focusable at the moment the form is submitted, or apply dynamic validation logic based on UI visibility.