HTML5 allows us to do a large number of things, among them we have form validations in a simple and uncomplicated way, in a native and very friendly way, since we use attributes in the fields for this purpose; this saves us a lot of headaches from using external libraries, playing with events and so on, everything is native and practically automated.
Client-side validations with HTML5
These validations are NOT a replacement for server-side validations, as a good programmer that you surely are, you should know that it is necessary to validate on both sides, especially on the server side we must always verify the data received; Since it is HTML, the user can modify the HTML from the browser's developer console or simply create their own form that points to our server and destroy or damage our application.
The type attribute to define the data type of the input and other elements of the form
As we explained in a previous post, where we talked about the different types of form fields that HTML5 brings us:
The pattern attribute is compatible with the following form inputs:
- password
- search
- tel
- text
- url
- number
- month
- time
- week
- datetime
- datetime-local
Which are practically all of them; Before continuing, you must be clear that a large part of the validations are carried out with regular expressions that we explain a little in the next section.
A crucial practice that must be carried out when creating applications, especially web applications, is to validate the data entered by the user both on the client side and on the server side; with the emergence of JavaScript it is possible to perform client-side validations and thus avoid multiple calls to the server and saturating it.
What are regular expressions?
Regular expressions are patterns used in multiple applications to search for certain characters or combinations thereof and a subset of the latter, which is form validation with JavaScript; Thanks to HTML5, it has its own API through the pattern attribute that we can use in the forms.
Regular expressions are used to find matches and patterns, that is, it has the desired format and reject or accept it as required; In the case that interests us, for form fields, we can indicate what length, what types of data, matches and what characters it should and should not have and in what positions or range of positions; They are widely used not only for validations but for all types of applications in general and are widely supported by programming languages including HTML5, which is a basic language for the World Wide Web; You can have more information about it at MDN: Expresiones Regulares
The problem of validations with native JavaScript
Currently there are a large number of web browsers, each with its own conventions, which makes client-side validations through this route difficult; In addition, this way we do not have to incorporate or develop our own plugins or add-ons to carry out this work.
Validating forms is a fundamental task today, and this is because forms have become the fundamental piece of any application or web page, they are used to obtain all types of information from the user and many times it is necessary that this information or data entered by the user has a certain format or organization and here come the validations through JavaScript and the case of interest to us, the validations through regular expressions that we can configure using a simple attribute and the regular expression for validation.
JavaScript plugins for data validation and validation types
There are a large number of libraries, frameworks or plugins developed by third parties that perform this task of validating user data and many of them with support for the most used web browsers; However, this results in the inclusion of files in the web application and therefore increases the loading time of the site to perform a task as simple as validating the data; Thanks to HML5 it is no longer necessary to use these libraries, it is enough for us to use regular expressions as indicated above.
Although also remember that we must always validate the data on both sides (double validation), at least the data must be validated on the server side since this is the one that processes the data and the fundamental entity for saving the user's data, remember that The user can go from using your form to going directly against the server or even manipulating the HTML of the form.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter