When designing forms, you should not forget to apply inline validation to them. This will ensure that whoever is asked to fill it in, will be instantly prompted to correct a mistake, should it occur, before submitting the form.

This will ensure that the experience is smooth and the probablility of the data loss is reduced to a minimum.

Requirements

By default, WFP recommends a jQuery Validation Plugin, which is well documented and actively supported. Please, refer to its documentation for ways to implement inline validation for your forms.

To properly mark up your forms, follow the examples below. Make sure to load forms.css stylesheet to have all required styles applied to your forms automatically.

Generally all types of fields can follow the same patterns. If you have a very specific case where it would be difficult to apply them, you can use a custom one, as long at it follows general visual guidelines set in the examples below (colours and display).

Form validation requires generally the following:
- to add attribute required to elements which are mandatory;
- to add a correct value for the type attribute (such as email or number;
- (optional) to add a pattern attribute, which will provide a base for native HTML5 validation (only for supported browsers or compatible validation plugins).

For more information about available HTML5 input attributes, visit Mozilla Developer Network pages.

“Invalid” Pattern

To correctly show an invalid field, add class invalid to an input element. Next, insert error description using span with a class error just below the input.

Example

Sample Markup

<form class="wfp-form--stacked wfp-grid">
  <div class="wfp-u-1-2 wfp-box">
    <label for="full-name">Full name:</label>
    <input class="invalid" id="full-name" type="text" placeholder="e.g.: John Doe" required>
    <span class="error">Please, enter your full name.</span>
  </div>
  <div class="wfp-u-1-2 wfp-box">
    <label for="email">Email address:</label>
    <input class="invalid" id="email" type="email" placeholder="e.g.: john@doe.com" value="incorrect@email" required>
    <span class="error">Please, use a correct email address.</span>
  </div>
</form>

“Valid” Pattern

When inputs are validated successfuly, you should replace their invalid class with valid and remove or hide the error description.

Example

Sample Markup

<form class="wfp-form--stacked wfp-grid">
  <div class="wfp-u-1-2 wfp-box">
    <label for="full-name">Full name:</label>
    <input class="valid" id="full-name" type="text" placeholder="e.g.: John Doe" value="John Doe">
  </div>
  <div class="wfp-u-1-2 wfp-box">
    <label for="email">Email address:</label>
    <input class="valid" id="email" type="email" placeholder="e.g.: john@doe.com" value="correct@email.com" required>
  </div>
</form>