The first part was about the new controls HTML5 offers.
Another important requirement for forms is validation.
What is validation anyway?
Validation is used to check the validity of user data before further processing. Here, a distinction can be made between validation on the client side and validation on the server side.
Only the validation on the server is decisive for further processing. User data must never be trusted, even if the client performs a validation. Never ever! No, never!
Validation on the client is exclusively for quick user feedback.
Client-side validation
Browsers now offers a large number of ready-made checks.
The simplest check is the mandatory field. This can be defined by the HTML required attribute.
<input type="text" required="required">
The nice thing is that the browser and the operating system does all the work. Also, the controls and messages match the system UI.
Perhaps the most powerful check is the pattern Attributes.
Here you have the possibility to check your entries quite freely.
The following defines a mandatory field that allows a minimum of 4 and a maximum of lowercase letters.
<input type="text"
required
pattern="[a-z]{4,8}"
title="4 to 8 lowercase letters">
Server
Besides the fact that user data should never be trusted, client-side testing holds other challenges.
For example, inconsistencies between the client and server validations can confuse the user. In the worst case, the validations prevent input.
For example, a form would not work if the client only allowed lowercase letters and the API only allowed uppercase letters.
Such obvious errors are likely to be noticed quickly, but there are also minor discrepancies that are then difficult to detect and frustrate the user and the developer.
By the way, here applies as always: test, test, test.
Top comments (0)