Validation in HTML5

Interactive websites and applications cannot be presented without forms that allow us to communicate with our users and receive the data necessary to ensure smooth transactions with them. While we can improve the usability of our forms with the well-chosen UX design pattern. HTML5 also has its own mechanism for restricting validation, which allows us to catch input errors right on the front end.



Input validation has a primary purpose — security. When it comes to security, this means that we must prevent injections of malicious content, be it intentional or accidental. When checking the external input interface, our job is to set reasonable limits on user input.

Validation in HTML5

Before the advent of HTML5, front-end developers were limited in verifying user input using JavaScript. It was a tedious and error-prone process. To improve client-side validation, HTML5 introduced a constraint-checking algorithm that works in modern browsers and verifies the correctness of user input.

')

Thanks to the HTML5 constraint checking function, we can perform all standard input validation tasks on the client side without JavaScript, exclusively with HTML5.



In addition to those types of input data that already existed before HTML5 (text, password, submit, reset, radio, checkbox, button, hidden), we can also use the following HTML5 semantic types: email, tel, url, number, time, date, datetime, datetime-local, month, week, range, search, color .



We can safely use HTML5 input data types with older browsers, since they will behave like a field in browsers that do not support them.

A couple of attribute examples for validation.

Using the following semantic attributes for validation can be very useful and can even help us more than we think:



1) required

Required is the most famous attribute in HTML validation. It can not be meaningful. Just the tags that this attribute uses should not be empty.

<input type="text" name="text" class=”mytext” required> 

It can be used in the following inputs: url, email, text, password, date, month, week, tel, search, select, textarea, file, checkbox, time, number . For example, a user may forget to enter a value in the input field. In this case, an error message will be displayed until this field is filled in correctly. Therefore, it is important to always visually mark the required fields for the user.



2) maxlength

This attribute allows you to set the maximum length of the text to be entered for the text input field. Maxlength can be used in the following steps: textarea, password, url, tel, text and search.



In this textarea character limit will be up to 350.

 <textarea name="message" id="message" cols="40" rows="6" maxlength="350"></textarea> 

Maxlength will not show an error, but the browser will not allow the user to enter more than the specified number of characters. A good example would be the tel - pole tag for a phone number that cannot have more than a certain number of characters, or a feedback form where we do not want users to write messages more than a certain length.



3) max, min

The min and max attributes can help specify the range between the minimum and maximum number. We can use these attributes in the following steps: date, time, week, range, number, and month . In the following example, we can see the minimum and maximum differences between the ages of 18 and 65 years.

 <input type="age" name="age" min="18" max="65"> 

If the user enters the age of 17 years or after 66 years, he will receive an error message, despite the fact that this request will not be sent to the server.



4) step

The step attribute can be used for a numeric interval. In the following example, there is an input number where we specify the minimum and maximum year, but we add step = "4" . This means that with each change the value will change in 4-year increments.

 <input type="number" name="leapyear" min="1972" max="2016" step="4"> 

The user can also enter the value manually in the input field, but in this case, if it does not meet the restrictions, the browser will display an error message.



5) pattern

The pattern attribute uses a regular expression to validate this field. A regular expression is a predefined set of characters that make up a specific pattern. We can use it either to search for strings that follow a pattern, or to provide a specific format, a specific pattern.



The following example requires users to enter a password that contains at least 8 characters and includes at least one letter and one number:

 <input type="password" name="password" required pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"> 

Conclusion

In this article, we looked at how to use the HTML5 form and restriction algorithm provided by the browser. We can usually do this using JavaScript or PHP, but for a start, we can use HTML5 to optimize access to the database or other scripts.