HTML5 Form Validation Code with Example

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.

html5 form validtion

 

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">

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]+$">

Last 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="password" to get the password of the user. So, We need to validate it based on the following points –

  • The password input can’t be empty.
  • The password must have at least one uppercase, one lowercase, one digit, one special character & 8 characters long.
  • White Spaces must not exist in the password

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 than 2020-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>

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.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="html-form">
  <h3>How to Validate Form Using HTML5</h3>

<form method="post">

  <div class="flex-container">
  <div>
  	 <label>First Name</label>
      <input type="text" placeholder="Enter First Name" required pattern="^[A-Za-z]+$" title="Please Enter Only Alphabet without spaces">
  </div>
  
  <div>
  	  <label>Last Name</label>
     <input type="text" placeholder="Enter Last Name Name" required pattern="^[A-Za-z]+$" title="Please Enter Only Alphabet without spaces">
  </div>
  <div>
  	<br>
      <input type="radio" name="gender" required>
      <label>Male</label>
       <input type="radio" name="gender" required>
      <label>Female</label>
  </div>
</div>

 

  
  <div class="flex-container">
  <div>
       <label>Email Address</label>
       <input type="email" placeholder="Enter Email Address" required>
  </div>

  <div>
  	  <label>Age</label>
      <input type="number" placeholder="Enter Age" min="18" max="35" required>
     
  </div>
  <div>
       <label>Password</label>
      <input type="password" placeholder="Enter Password" title="Password must be 8 characters with at least one uppercase, one lowercase, special characters & number" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$" >
  </div>
</div>


  <div class="flex-container">
   <div>
  	  <label>Mobile Number</label>
  <input type="tel" placeholder="Enter Mobile Nubmer"  title="Mobile Number must be a number with 10 digits" required pattern="[2-9]{2}\d{8}">
  </div>

  <div>
  	  <label>Date of Birth</label>
      <input type="date" required min="1995-01-02" max="2020-10-05"> 
  </div>

  <div>
      <label>Website URL</label>
      <input type="url" placeholder="Enter Website URL" required>
  </div>
</div>

<input type="submit">

</form>
</div>

</body>
</html>

 

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.

<style>
.flex-container {
  display: flex;}

.flex-container > div {
  width:33%;
  margin: 0px 10px;}

.html-form{
  width: 46%;
    background: #d4e6f7;
    padding: 10px;}

input[type="submit"]{
    border: none;
    background: #003fad;
    color: white;
    padding: 5px 35px;
    font-size: 20px;
    position: relative;
    left: 11px;}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="range"], input[type="date"]{
  width: 100%;
    height: 20px;
    background: white;
    border: 1px solid lightgray;
    margin: 5px 0px;
    padding: 5px;}
</style>

 

 

Leave a Comment