Form Validation

This is an example of basic form validation.

Optional
Prefered form of contact

Implementation Notes

This form validates simply based on whether or not fields are blank. On submission, each input is checked to see both if the user has entered a value and if that input has the required attribute. Error messaging is shown for Full Name and Email, and browser focus is moved to the first item that failed validation.

The validation message for each item is stored in the DOM at all times, nested inside the labels for these elements but hidden by the class .label__error-messageuntil the parent .form-group has the .is--invalid class added.

See markup on Github.