validation-enhancer: Custom HTML5 Form Validation Web Component

validation-enhancer: a lightweight web component that upgrades native HTML5 form validation with inline errors, CSS state classes, and full accessibility support.

Key features:

• Wrap any HTML form in <validation-enhancer>. No changes to individual inputs needed.
• Inline error messages next to each field on focus-out and submit
• .valid / .invalid CSS classes for input styling
• aria-invalid and aria-live built in for screen readers
• Optional Zod schema integration via <validation-enhancer-zod>
• Scroll-to-first-error on submit with configurable scroll container support
• MutationObserver support for dynamically added fields

Works with any HTML/JS project. Standard, minified, and ES2017 compat builds included.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo