A tabbed form that silently refused to submit — required fields hidden behind another tab
Background The site edit modal kept accumulating fields — site name, category, SSH connection details, WordPress install location — until editing anything meant scrolling up and down a single long form to find the right field. To clean this up, we split it into three tabs: "Registration info," "SSH," and "WordPress info." That change broke form submission itself, in a way that was hard to spot at…
The site edit modal's form edit process became increasingly cluttered with various fields, such as site name, category, SSH connection details, and WordPress install location. To declutter the form, it was divided into three tabs: Registration info, SSH, and WordPress info. However, this change unintentionally broke the form submission functionality.
The tabbed form implementation relied on a simple CSS and JavaScript approach. Each tab's fields were contained within a div using the class "site-tab-content" and had a data-tab attribute for identification. The CSS toggled the visibility of the tabs using display: none; for inactive tabs and display: block; for the active one.
The issue arose when a required field was in an inactive tab, and the user filled it out while editing from a different tab. Clicking the save button yielded no response, as no error message appeared. The form simply appeared to be stuck.
The root cause of the problem was HTML5 form validation. When an invalid field was hidden behind a tab with display: none; the browser had no place to display the error bubble. Despite blocking the submit event, the browser could not visualize the error, resulting in no visible feedback and making the button seem unresponsive.
To resolve this issue, the developer opted to stop relying on the browser's automatic blocking and instead control validation through JavaScript. By adding the novalidate attribute to the form, the automatic block and error visualization were disabled, allowing JavaScript to manage the validation process. The saveSite function was modified to check the form's validity, and if invalid, it would force the first :invalid element to be visible by switching to its respective tab.
After ensuring the field's visibility, the function called reportValidity() to display the error bubble.
This solution effectively addressed the form submission issue and improved user experience by guiding users directly to the problematic field. Additionally, the implementation incorporated ARIA roles and attributes for better accessibility, providing a more inclusive solution for navigating the tabbed form.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
