Validating a HTML form (specially contact form) is essential, as it helps to collect correct data (or valid form values) from the users of your site in a secure way. It provides you with the options to identify the users where they’ve gone wrong while filling the form. Normally if such task is concerned, a developer thinks about JavaScript coding to implement this functionality. But in today’s world of development you have to be thankful to HTML5 which has provided this opportunity to make it in easy way avoiding such type of complex coding.

HTML5 has introduced several beneficial ways, and among them, a dozen of new input types and attributes appears to be the most important one as they help the developers to perform validation without writing the complex codes.

I am explaining a working example for your better understanding about using HTML5 for form validation here in this tutorial below.

Getting Started

While creating a new html file for this purpose it is recommended to use HTML5 doctype resource since it will help you to avert the validation errors. Also if some old browsers not supporting them, the HTML won’t really toss at you any errors.

Creating From

You are going to create a form which will use client side validation and enhance your user experience. It will provide an instant feedback to user without making a trip to server again and again. However, a server-side form validation will still be required at the end.

Now let us look on an example mentioned below demonstrating that how a form can be validated using built-in validation of browser.

“Note: In this example the bootstrap form is used. So, you have to link the style sheet for bootstrap in header while creating the document.”

<div class=”container”>
<div class=”row”>
<div class=”col-md-6 well”>
<legend>Stay in touch with us!</legend>
<form>
<div class=”col-md-12 col-sm-12 input”>
<input class=”form-control” name=”name” placeholder=”Full Name*” type=”text”>
</div>
<div class=”col-md-12 col-sm-12 input”>
<input class=”form-control” name=”email” placeholder=”Email*” type=”text”>
</div>
<div class=”col-md-12 col-sm-12 input”>
<input class=”form-control” name=”phone” placeholder=”Phone*” type=”text”>
</div>
<div class=”col-md-12 col-sm-12 input”>
<textarea rows=”3″ id=”comment” name=”comment” class=”form-control” placeholder=”Your Comment”></textarea>
</div>
<div class=”col-md-12 col-sm-12″>
<button class=”btn btn-warning” type=”submit”>Submit</button>
</div>

</form>
</div>
</div>
</div>

Output:

form

As you can see in the above code that every input field has a “placeholder” attribute which is useful to identify the tag and helps in keeping our HTML semantic.

Since the screen reader users will read the text provided as the placeholder, to identify the essential fields that they cannot miss to fill, we just need to add ‘required’ (*)  to the placeholder text (as shown in the code above).

Required fields

Now the task for validating the required fields is simple as just adding the required attribute to the input field. For example you can present the required name field in this manner.

<div class=”col-md-12 col-sm-12 input”>
<input class=”form-control” name=”name” placeholder=”Full Name*” type=”text” aria-describedby=”name-format” required>
</div>

Now if you will try to submit the form without entering any value in the name field, it will display an error notification like below.


req


You should also keep in your mind that all the browsers might not implement the required attribute. And so, your required fields might not be picked in the correct manner in some browser. In that case, it is recommended that you should add aria-required=”true” to the required attribute as below.

<input class=”form-control” name=”name” placeholder=”Full Name*” type=”text” aria-describedby=”name-format” required aria-required=”true”/>

Defining Data Patterns for Validation

Now, our users will be notified to fill the complete required form fields. However, there is one thing we’ll have to scrutinize: whether users are entering the right data that we require or not. For instance, you may want the ‘Name’ field to be filled in the format: ‘full name’ or ‘first name’ and ‘last name’, and might want any numeric or character to be added. For this purpose, you just need to integrate a “pattern attribute” to the ‘Name’ field in the following manner:

<input class=”form-control” name=”name” placeholder=”Full Name*” type=”text” aria-describedby=”name-format” required aria-required=”true” pattern=”[A-Za-z-0-9]+”/>



req-format


It would be better to specify the exact format that users need to follow any particular field, though this isn’t necessary but a recommended exercise. You can do so, by adding the below line of code:

<input class=”form-control” name=”name” placeholder=”Full Name*” type=”text” aria-describedby=”name-format” required pattern=”[A-Za-z-0-9]+” title=”[A-Za-z-0-9]+”/>

We can also validate fields as per their type like below:

<input class=”form-control” name=”email” placeholder=”Email*” type=”text” pattern=”/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/” required />

<input class=”form-control” name=”phone” placeholder=”Phone*” type=”text” required pattern=”[0-9]+” title=”[0-9]+”>

By explicitly specifying the most suitable type, our browser will ensure that the data is validated and all the required entries are made in their respective fields only.

Adding CSS to Highlight: Required Fields and Invalid Data

While HTML5 provides us with a number of new input types and attributes, on the other hand, CSS3 provides certain new pseudo-classes. Which is also a good practice for making your interface valuable. These classes offer the user with visual clues regarding the form fields that are required, optional, and the ones with invalid data. Let us now consider an example to see how we can use the pseudo-class to highlight these visual clues.

In order to highlight the required fields, you’ll have to use “:required” pseudo-class:

input:required {

background: #FAB552;
}

In order to highlight the invalid fields, you’ll have to use “:invalid” pseudo-class:

input:invalid {

background:#E26060;
}

Once all the above discussed changes are made, our final HTML will look something like:

<div class=”container”>
<div class=”row”>
<div class=”col-md-6 well”>
<legend>Stay in touch with us!</legend>
<form>
<div class=”col-md-12 col-sm-12 input”>
<input class=”form-control” name=”name” placeholder=”Full Name*” type=”text” aria-describedby=”name-format”
required pattern=”[A-Za-z-0-9]+” title=”[A-Za-z-0-9]+”/>
</div>
<div class=”col-md-12 col-sm-12 input”>
<input class=”form-control” name=”email” placeholder=”Email*” type=”text”
pattern=”/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/” required />
</div>
<div class=”col-md-12 col-sm-12 input”>
<input class=”form-control” name=”phone” placeholder=”Phone*” type=”text” required pattern=”[0-9]+” title=”[0-9]+”>
</div>
<div class=”col-md-12 col-sm-12 input”>
<textarea rows=”3″ id=”comment” name=”comment” class=”form-control” placeholder=”Your Comment”></textarea>
</div>
<div class=”col-md-12 col-sm-12″>
<button class=”btn btn-warning” type=”submit”>Submit</button>
</div>

</form>
</div>
</div>
</div>

That’s it for now! Hope this post will benefit you in implementing form validations correctly using the HTML5.

Video for this tutorial created by Webucator on YouTube