Skip to main content

Page validation

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 for attribute's value must be the id of 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 required and aria-required (for screen readers).
  • Input needs an id, name, and 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.
  • Use pattern="" attribute to validate against a custom regular expression.

Simple input example to illustrate markup

<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>

Full form preview