Responsive Validation

In classical web applications, there is a well-known problem where the front-end component submits the user input data via HTML form submission to a back-end component running on a remote web server. Only this back-end component validates the data and returns the validation results in the form of a set of error messages to the front-end. Only then does the user get the validation feedback. This approach is no longer considered acceptable today. In a responsive validation approach, the user should get immediate validation feedback on each single data input. Technically, this can be achieved with the help of event handlers for the user interface events input or change.

Responsive validation requires a data validation mechanism in the user interface (UI), such as the HTML5 form validation API. Alternatively, the jQuery Validation Plugin can be used as a non-HTML5-based form validation API.

A responsive form will inform the user when they’ve violated a constraint. For example, in the illustration below, the user fails to input a name—which is a mandatory value—and is informed about it.