{
  "id": 3849381,
  "title": "A tabbed form that silently refused to submit — required fields hidden behind another tab",
  "url": "https://urgent.news/2026/08/28/a-tabbed-form-that-silently-refused-to-submit-required-fields-hidden",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-28T00:21:37.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/susumun/a-tabbed-form-that-silently-refused-to-submit-required-fields-hidden-behind-another-tab-52e4"
  },
  "original_language": "en",
  "account": "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.\n\nThe 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.\n\nThe 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.\n\nTo 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.\n\nThis 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.",
  "summary": "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…",
  "key_points": [
    "Site edit modal form divided into three tabs: Registration info, SSH, and WordPress info",
    "Required field in inactive tab caused form submission issue due to HTML5 validation",
    "JavaScript validation and ARIA roles resolved form submission problem and improved accessibility"
  ],
  "editors_take": "Switching to JavaScript-controlled validation improves user experience by providing direct feedback on form errors and ensures accessibility with ARIA roles, addressing a key usability issue with the tabbed form.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}