Demo of validations in this article can be found here - https://codepen.io/michaelburrows/pen/wvMXaoy
In the past client side form validation could only be achieved by using JavaScript.
While HTML validation is not as customisable it’s a much cleaner and simpler solution to implement.
This article contains just some examples of the different types of validations you can do with HTML.
Required Fields
If a field is mandatory then simply add the required attribute.
<input type="text" required>
Email validation
Email addresses can be validated using a type="email" input field.
This checks that the input text contains @ and . symbols with no spaces between the characters.
<input id="email" type="email" name="email" required>
Username validation
Username requirements vary so we need to use the pattern attribute.
The patter attribute allows us to use regular expressions to test for more explicit requirements.
In this example the pattern only allows letters, numbers, and be between 3 & 15 characters in length.
<input id="username" type="text" name="username" required pattern="^[a-z0-9]{3,15}$" title="Password may only contain letters and numbers">
Also note the inclusion of the title attribute.
This will appear in a tooltip to help users understand the field requirements if text is invalid.
Password validation
As with usernames password requirements vary so we’ll once again use a pattern.
This pattern will accept 8 to 25 characters with at least one uppercase & lowercase letter, and a number.
<input id="password" type="password" name="password" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,25}$">
URL validation
URLs can be validated using the type="url" input field.
An optional pattern is used ensure URLs start with http(s) otherwise file:// would be a valid URL.
<input id="url" type="url" name="url" required pattern="https?://.+">
Age validation
If you need to validate an age or any number that falls between two values the type="number" input is used.
As number fields only allow numbers we just need to specify our min and max values.
<input id="age" type="number" name="age" required min="18" max="36">
Styling valid/invalid input using CSS
Using the following CSS we can style fields based on whether they contain valid or invalid data.
input {
border: 2px solid #eee;
border-radius: 4px;
}
input:valid,
input:in-range {
border-color: green;
}
input:invalid,
input:out-of-range {
border-color: red;
}
If a field contains a valid input it will have a “green” border otherwise the border is “red”.
Top comments (1)
Cool and we all should definitely learn proper html5 form validation. However, it doesn't scale so well.