Form Field Validation Highlighter

WHAT IT DOES

Form Field Validation Highlighter brings instant, visual validation feedback to every form on the web. Instead of struggling to find which fields are invalid after submitting a form, this extension highlights invalid fields in real-time as you type, with configurable colored borders or backgrounds. Each invalid field displays its validation error message in a floating tooltip, explaining exactly what needs to be fixed—whether it's a required field, invalid email format, password mismatch, or any other HTML5 constraint violation. A summary panel shows all invalid fields on the page at a glance, helping you quickly identify and resolve all issues before submission. The extension works with standard HTML5 validation, custom validation messages, and provides live feedback on input, change, and blur events.

WHERE IT RUNS

The extension works on every website with HTML forms, including registration pages, login forms, checkout processes, profile editors, CMS admin panels, CRM systems, survey platforms, and any other web-based form interface. It runs locally in your browser, processing validation states in real-time without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension automatically enables validation highlighting. As you type in form fields, invalid fields will be highlighted with a colored border or background (configurable in settings). Hover over or focus on an invalid field to see a tooltip with the validation error message. To see all invalid fields at once, click "Show Invalid Fields Summary" in the panel—a summary card will appear showing each invalid field and its error message. Use the toggle in the panel to enable or disable highlighting globally. Customize the highlight color, style (border, background, or both), and toggle tooltips on or off. For per-site preferences, use "Enable on This Site Only" or "Disable on This Site Only" to override global settings for specific websites.

THE ACTUAL MECHANISM — HTML5 CONSTRAINT VALIDATION WITH REAL-TIME EVENT PIPELINE

The extension leverages the browser's built-in HTML5 Constraint Validation API, which provides a standardized way to check form field validity. For each form field (input, select, textarea), the extension accesses the `validity` property and checks the `valid` flag. When a field is invalid, it reads the `validationMessage` property, which contains the browser's user-friendly error message (or the custom message set via `setCustomValidity`). The extension then applies CSS classes to the field (based on the user's selected highlight style) and creates a tooltip element positioned near the field using `getBoundingClientRect()` to calculate precise coordinates. The tooltip is displayed with a fixed position at high z-index (2147483000) to ensure it appears above all page content. The extension attaches `input`, `change`, and `blur` event listeners to every form field. The `input` event fires on every keystroke, allowing for instant feedback; the `change` event captures selection and paste actions; the `blur` event triggers validation when the user leaves the field. All listeners are debounced with a 50ms delay to prevent excessive DOM updates. A summary view aggregates invalid fields by iterating through the invalidFields array and building a compact list of field identifiers and error messages. The summary card is positioned at the bottom-right corner with a close button for dismissal.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, scan button, style selector, color picker, tooltip toggle, per-site settings, and summary button—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and styling engine. Because websites frequently update their form structures and JavaScript frameworks, certain complex web applications may occasionally require manual scanning using the "Scan & Highlight All Fields" button. The extension will automatically check for updates weekly and notify you when a new version is available. No personal data, browsing history, or form content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.