In this tutorial, you will get HTML5 form validation with an example. It is very useful to validate the form input fields from the front-end. Even It protects the form by entering invalid data. So, you must implement it in your project form.
You will learn to validate much input like First Name, Last Name, Gender, Email address, mobile number, password, date of birth & website URL. Once you learn it, you will definitely implement validation for another form input using HTML.
Table of Contents
HTML5 Form Validation Attributes
If you work on the form then you will have to make it more secure from the front-end. So, HTML5 provides some validation attributes that are necessary for the security of the form & its’s input fields.
Learn Also –
PHP Form Validation with Example
How to Embed PDF File in HTML Page
Now, Let’s understand all validation attributes from the next steps –
Required Validation Attribute
Required Validation Attribute does not allow to submit the empty input field. It means that you will have to enter some values into the input field before submitting the form. otherwise, you will get an empty error message.
It is represented by required attribute.
You can use required attribute within all types of input fields like text, email, password, file, radio, URL, date, select, textarea, range, number & more.
Example –
<input type="text" required>
<input type="email" required>
<input type="number" required>
<select required>
<option>First Option</option>
<option>second Option</option>
</select>
<textarea required>
</textarea>
Pattern Validation Attribute
The pattern Validation attribute validate input values based on regular expression when you submit the form.
If user input values do not match with declared characters of regular expression then it will display an error to match the requested format.
You should use the title attribute with the pattern attribute to display a custom error message.
Syntax –pattern=”regular_expression_characters”
You can use with some input fields like text, date, search, URL, tel, email, and password
Example –
<input type=”text” pattern=”[A-Za-z]{5}” title=”Please Enter only 3 letters characters”> // It accepts only 3 letters characters only
Read Only Validation Attribute
The read-only validation does not allow the user to modify the input values.
It is represented by readonly attribute.
If you use readonly attribute within an input field then the user will have to only read input values. But read-only input field will definitely send values to the server
Example –
<input type=”text” value=”12345″ readonly>
Disabled Validation Attribute
The disables validation makes an input field unclickable or unusable
It is represented by desabled attribute.
If you use desabled attribute within an input field then the user will have to only read input values and he will not be able to click. But the disabled input field will never send values to the server.
<input type=”text” desabled><input type=”submit” desabled>
Min Validation Attribute
Min validation attribute allows an input field to accept only values that are more than declared minimum values.
Syntax –min=”numeric_value
You can use min attribute with numeric input fields like number, range, date & so on
<input type=”number” min=”10″>
Max Validation Attribute
The Max validation attribute allows an input field to accept only values that are less than declared maximum values.
Syntax –max=”numeric_value”
You can use max attribute with numeric input fields like number, range, date & so on
Example –<input type=”number” max=”25″>
Max Length Validation Attribute
Max Length Validation attribute allows a numeric or text input field to accept only values that are less than specified maximum values.
Syntax- maxlength=”numeric_value”
Example –
<input type=”number” maxlength=”10″>
formnovalidate Validation Attribute
formnovalidate Validation Attribute allows us to submit the form when all input fields are validated successfully.
It is used only with the submit input field.
Syntax –formnovalidate=”formnovalidate”
Example –
HTML5 Form Input Validation
For your better understanding, I’m going to explain each form input validation separately with an example. So, you should read all the next steps without skipping anyone.
First Name Input Validation
You should declare the input type="text" to get the First Name of the user. So, We need to validate it based on the following points –
- The First Name can’t be empty.
- First Name must be the only letters that may be in uppercase or lowercase
- White Spaces must not exist in the First Name
Example –<input type=”text” placeholder=”Enter First Name” title=”Please Enter Only Alphabet without spaces” required pattern=”^[A-Za-z]+$”>
Second Name Input Validation
You should also declare the input type="text" to get the Last Name of the user. So, We need to validate it based on the following points –
- The Last Name can’t be empty.
- Last Name must be the only letters that may be in uppercase or lowercase
- White Spaces must not exist in the Last Name
Example –<input type=”text” placeholder=”Enter Last Name” title=”Please Enter Only Alphabet without spaces” required pattern=”^[A-Za-z]+$”>
Gender Input Validation
You should also declare the input type="radio" with the same name to get the gender of the user. So, We need to validate it based on the following points –
- Gender Input can’t be empty.
- Gender must be pointed only either Male or Femail
Example –<input type=”radio” name=”gender” required><input type=”radio” name=”gender” required>
Email Input Validation
You should also declare the input type="email" to get the Email Address of the user. So, We need to validate it based on the following points –
- The Email Input can’t be empty.
- Email Address must be valid & contained @ symbol
- No white spaces remain in Email Address
Example –<input type=”email” required>
Password Input Validation
You should also declare the input type="text" to get the Last Name of the user. So, We need to validate it based on the following points –
- The Last Name can’t be empty.
- Last Name must be the only letters that may be in uppercase or lowercase
- White Spaces must not exist in the Last Name
Example –<input type=”text” placeholder=”Enter Last Name” title=”Please Enter Only Alphabet without spaces” required pattern=”^[A-Za-z]+$”>
Mobile Number Input Validation
You should also declare the input type="text" to get the Mobile Number of the user. So, We need to validate it based on the following points –
- The Mobile Number Input can’t be empty.
- Mobile Number must be the only numbers of 10 digits
- White Spaces must not exist in the Mobile Number
Example –<input type=”tel” placeholder=”Enter Mobile Nubmer” title=”Mobile Number must be a number with 10 digits” required pattern=”[2-9]{2}\d{8}”>
Date Input Validation
You should also declare the input type="date" to get the date of birth of the user. So, We need to validate it based on the following points –
- The Date input can’t be empty.
- The date must be greater than
1995-01-02& less than2020-10-05
Example –<input type=”date” required min=”1995-01-02″ max=”2020-10-05″>
URL Input Validation
You should also declare the input type="url" to get the website URL. So, We need to validate it based on the following points –
- The URL input can’t be empty.
- A URL must be a valid address.
Example –<input type=”url” placeholder=”Website URL” required>
Form Submit Validation
You should also declare the input type="submit" to submit the input values of the form.
You should also validate the form on submitting the form using formnovalidate="formnovalidate" that does not allow to submit the form unless all the input fields are validated successfully.
Example –<input type=”submit” formnovalidate=”formnovalidate”>
How to Validate a Form Using HTML5
You can validate a form using HTML5 validation attributes within the form input fields. It is basic validation but you can also validate using another language like jquery, javascript, & PHP.
HTML Form Validation Code –
Here is the complete validated HTML5 form code. You can use it directly in your project.
How to Validate Form Using HTML5
CSS Code to design Validation Form –
You can also use the following CSS code to design a validation form. Otherwise, you can also write your own CSS code based on your project requirement.
