From the Author: Validating form input in HTML5 is something that should be taken seriously. Without proper validation, if you are lucky, you will only get a lot of unnecessary and inappropriate input. However, there is also the possibility that hackers will be able to obtain the personal data of users who have entrusted you with their information.
Since validation is important, it makes sense to use tools and libraries for checking and clearing data for both front-end and back-end.
This guide will focus on using HTML5’s built-in functions to validate various input types without any external libraries. Obviously, you should not stop at HTML5-based validation alone, but that would be a good start to increase the security of forms on your website.
Form input element
Whenever you want to get some information from your users, you will most likely use the HTML input element. It doesn’t matter if you want to get a username, last name, email address, the city they currently live in, a phone number or your favorite sports team. The input element is a very convenient way to get information from visitors.
However, some attackers would like to take advantage of the fact that they can enter into the input element and send almost any line through the form. Similarly, there may be users who simply did not know that they were entering data in the wrong format.
Both of these problems can be easily resolved using some HTML5 attributes with form elements.
The type attribute determines which input type is considered valid for this element. If no value is specified for the type attribute, the default type is text. This basically means that all kinds of input text will be considered valid for this particular element.
This is useful when you want users to enter their names. However, when you want them to enter an email address or numbers, such as their age and weight, it is much better to set the type attribute to something suitable. Here are some values you can choose:
email: The user will be prompted to enter the email address in the correct format. For example, they cannot just write myemail.com or something @ or @ something. They will need to enter a value similar to email@example.com. Of course, they can still enter non-existent email addresses, but that’s another problem!
number: Allows you to ensure that only numbers are valid. For example, when you ask someone in a uniform about his age, he will not be able to provide data in the format “potato” or “thirty-six”. He will need to write the actual number, for example, 36 or 15.
url: You can set the type url attribute so that users enter a valid url. In this case, they will not be able to enter something like tutsplus. In addition, tutsplus.com will also be considered invalid – users will need to enter the full URL, for example https://tutsplus.com.
tel: Using this value is not as useful as others, because the format of the phone number varies throughout the world. There is simply no standard template that browsers could map to an input element to determine if the number is real. However, setting the tel type can be useful at a later stage when you do your own custom validation.
There are many other values of the type attribute that can be used to indicate the input type valid for a particular element. You can read about all of these values on the MDN input elements documentation page.
The next CodePen demo shows how we can use the type attribute to control what is allowed for various input fields.
Attributes of minimum and maximum length
Another way to limit what is valid input for an element is to use the minlength and maxlength attributes. They set the minimum and maximum number of characters that must be entered into the input element to make it valid.
The required values for both of these attributes will vary from case to case. For example, some websites may require a username between 4 and 15 characters, while others may limit the maximum length to 12 characters. Similarly, people in some countries will have unusually short or long names compared to others.
Using Regular Expressions to Validate Forms
Setting the value of the type attribute certainly helps to limit what is considered valid input. However, you can go even further and specify a template that must be followed by a username or email address in order to be considered valid.
Suppose you want to make sure that usernames are only alphanumeric values. This can be easily implemented using the pattern attribute. You just need to set a regular expression for it, which will act as a guideline to determine which input will be valid and which will not.
Here are some examples of using regular expressions with the pattern attribute.
<input type = "text" id = "uname" name = "uname" pattern = "[a-zA-Z0-9]+" minlength = "4" maxlength = "10">
The above template will check that all usernames contain only characters a to z, A to Z, or 0 to 9. For example, monty42, 42monty, MON42ty, and mon42ty are valid usernames, but monty_42 is not.
The minlength and maxlength attributes will help ensure that the username is not too short or too long.
If you want your username to start with a specific character, such as an underscore, you can simply add it to the top of the template.
<input type="text" id="uname" name="uname" pattern="_[a-zA-Z0-9]+" minlength="4" maxlength="10">
Now every username that does not start with _ and contains any characters except az, AZ or 0-9 will be considered invalid.
I hope you now understand how we can use the pattern attribute and regular expressions to limit what is considered valid input, even when the type attribute is set to text.
Extended validation with regex patterns
You can also use the pattern attribute along with other types of input elements, such as email and url, to limit what is considered valid. For example, you want users to enter only the URL, which is a subdomain of tutsplus.com. You can simply set the pattern attribute to https: //.* \ .tutsplus.com. Now any input, such as https://google.com or https://envato.com, will be considered invalid. Even if you use the tutsplus.com URL starting with http: //, it will not be valid because it is assumed that the URL should start with https: //.
You can do the same with email addresses. If you want them to end with something specific, you can simply use the pattern attribute for this. For instance:
<input type="email" id="email" pattern=".+@tutsplus\.com|.+@envato\.com">
If the form uses the above input element, users will only be able to enter an email address that ends with tutsplus.com or envato.com. This means that firstname.lastname@example.org or email@example.com will be invalid.
Required fields and text placeholder
Although the required and placeholder attributes are not necessarily related to validation, they can be used to improve the user experience when someone fills out a form.
Not everyone is ready to share their information. If the form contains ten different input fields, but for what you want to do, you only need five or six, and the rest are for additional information, then it is recommended to inform users about this.
You can mark certain input fields as required using the required attribute. This will allow users to know what minimum information is absolutely necessary, and they must provide it when filling out the form. It can also increase the number of people who fill out the form because they will know in advance that filling out all the fields is not absolutely necessary.
The placeholder attribute is also very useful when it comes to form usability. For example, if you do not tell users that they need to enter URLs starting with https: // and which are subdomains of tutsplus.com, they may simply give up after an unsuccessful attempt to enter something.com or code.tutsplus in the URL. com.
In the following example, we used the pattern, required, and placeholder attributes for more control over validation and better user experience.
<form> <label for="name">Name: *</label> <input type="text" id="name" name="name" pattern="[a-zA-Z]+" placeholder="Monty" required> <br> <label for="name">Company Email Address: *</label> <input type="email" id="email" name="email" placeholder="firstname.lastname@example.org" pattern=".+@company\.com" required> <br> <label for="name">Age: </label> <input type="number" id="age" name="age" min="10" max="80" placeholder="30"> <br> <label for="name">Favorite Tuts+ Website: *</label> <input type="url" id="website" name="website" pattern="https://.*\.tutsplus\.com" placeholder="https://code.tutsplus.com" required> </form>
In this tutorial, we learned how to add basic form validation by simply using HTML and regular expressions. Using the correct value for the type attribute helps ensure that users enter information in the input field in a specific format. Using regular expressions with the pattern attribute can help us limit the valid input.
Finally, we learned how to use the placeholder attribute to ensure the convenience of the forms that we create, and so that people filling out the information are not upset because they don’t know the input format that we consider valid.
Posted by: Monty Shokeen