This is the message

Validating on submit

Traditionally most online forms use this approach where users enter data into the formfields then submit the data. The backend will process the information and return an error message if something isn't right.

Validating after each input

Another approach is to validate after each input field as opposed to after the entire form submission. After the user enters the data in each field the form will check the value and return an error message if invalid.

The experimental approach

This experimental approach combines aspects of the two previous approaches. This method is initially similar with the first approach, allowing the user to fill in the form and press submit before conducting any validation. But rather than simply returning a list of errors in the form, it provides the invalid form inputs directly in its place for the user to correct quickly. This should help speed up form corrections, especially in longer forms.

In the red zone

Three examples of forms outlining different validation interactions.

This experiment is designed to show three different ways we can present validation errors to the user and find which is right for any given situation.

read about this experiment

Validating on submit

Traditionally most online forms use this approach where users enter data into the formfields then submit the data. The backend will process the information and return an error message if something isn't right.

Validating after each input

Another approach is to validate after each input field as opposed to after the entire form submission. After the user enters the data in each field the form will check the value and return an error message if invalid.

The experimental approach

This experimental approach combines aspects of the two previous approaches. This method is initially similar with the first approach, allowing the user to fill in the form and press submit before conducting any validation. But rather than simply returning a list of errors in the form, it provides the invalid form inputs directly in its place for the user to correct quickly. This should help speed up form corrections, especially in longer forms.