This problem is well-known from classical web applications 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, often several
seconds later, and in the hard-to-digest form of a bulk message, does the user get the
validation feedback. This approach is no longer considered acceptable today. Rather, 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 in response to the form 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.
The HTML5 form validation API essentially provides new types of input fields
(such as number or date) and a
set of new attributes for form control elements for the purpose of supporting responsive
validation performed by the browser. Since using the new validation attributes (like
required, min, max and pattern) implies
defining constraints in the UI, they are not really useful in a general approach where
constraints are only checked, but not defined, in the UI.
Consequently, we only use two methods of the HTML5 form validation API for validating
constraints in the HTML-forms-based user interface of our app. The first of them,
setCustomValidity, allows to mark a form field as either valid or invalid by
assigning either an empty string or a non-empty (constraint violation) message string.
The second method, checkValidity, is invoked on a form before user input
data is committed or saved (for instance with a form submission). It tests, if all fields have
a valid value. For having the browser automatically displaying any constraint violation messages,
we need to have a submit event, even if we don't really submit the form,
but just use a save button.
See this Mozilla tutorial or this HTML5Rocks tutorial for more about the HTML5 form validation API.