ADK Form Validator

Component Overview

The Zenyth Form Validator is an advanced, accessible, and customizable solution for form validation in web projects. Designed to meet the highest accessibility standards, it ensures forms are fully interactive, user-friendly, and compliant with WCAG guidelines. The validator dynamically updates form attributes, ARIA roles, and error messages with aria-describedby, making it easier for users to identify and correct errors.

Key Features:

• Dynamic Attribute Updates: Automatically manages aria-required, aria-invalid, and aria-describedby attributes for enhanced accessibility.
• Error Messaging: Provides clear, contextual error messages using aria-describedby for screen readers.
• Custom Validation Rules: Supports customizable validation rules for fields, including min/max length, required fields, and custom patterns.
• Real-Time Feedback: Offers instant feedback to users as they interact with the form.
• Accessible by Design: Fully WCAG-compliant, ensuring compatibility with assistive technologies and improving usability for all users.

Benefits

The Zenyth Form Validator provides a robust solution for creating forms that are not only functional but also inclusive. By automating the management of accessibility attributes and error messages, it simplifies implementation while ensuring a seamless and equitable experience for all users.

Additionally, the Form Validator operates as a robust script that works with three specific selectors, which must be added to the form. These selectors enable the validator to layer accessibility attributes dynamically, including aria-invalid, aria-required, aria-describedby, and other necessary associations and interactions. The validator dynamically adds and removes error messages for input types such as text, email, textarea, radio groups, checkboxes, and select fields. It also disables the submit button while required inputs remain incomplete and re-enables it once all required fields are properly filled.

The Purpose of Disabling the Submit Button

This approach does not interfere with any events attached to the form’s submit button. By avoiding the addition of events to the submit button, the script ensures compatibility across multiple platforms, including Webflow, Shopify, BigCommerce, WordPress, and Magento. Simply adding the required attributes enables the Validator to function consistently and effectively.

Live Example