MWF leverages the standard HTML5 form and input validation. Developers can utilize all the validation benefits given by browsers in their standard format, making a fully accessible and very performant experience. MWF does not override any browser default to adhere to standards.
Validation and accessibility
Input must have an associated label. The
forattribute's value must be the
idof the input. This ensures that every form element has a programmatically associated label for full accessibility.
Required inputs must have a * at the end of the label text (for visual users). The input must also have
aria-required(for screen readers).
Input needs an
aria-describedby. All of these will have the same value. This further links the label to the input, and allows error feedback text to be properly linked and read by screen readers.
Certain input types will automatically run validation. In this example
type="email"validates against a regular expression describing a valid email.
pattern=""attribute to validate against a custom regular expression.
<form id="exampleForm" data-grid="col-12" method="post" accept-charset="utf-8"> <label class="c-label" for="email">Email address *</label> <input id="email" class="c-text-field f-flex" type="email" name="email" aria-describedby="email" required aria-required> <button name="button" class="c-button" type="submit">Submit button</button> </form>