Understanding How HTML5 Validation Works

By Vipul Patel

Any web developer can assure us that validation of input submitted on a form takes bulk of the time in building a web form. Even the most web-savvy users can and will make mistakes when it comes to filling up the information requested on a web form. This can result in incomplete or inaccurate data being submitted when the user clicks the Submit button on the webpage.

To avoid bad input, one needs to validate the data before processing. Validation is best done at the time of accepting the input. The earlier you can prevent bad data, the better.

Validation was historically completed by either server-side, which was executed once the user submitted the form. In this type of validation, the user provided inputs were submitted to the server, which then processed the input and determined if the inputs were incorrect or incomplete and throw an appropriate error message.

With the rise of JavaScript, browsers had begun support for client-side validation through specialized validation libraries.

The brains behind HTML5 sensed the basic pains that web developers faced to support validations for forms, and were persuaded to have built in support for validation and introduced support for client-side validation to nip the bad inputs in the bud.

Through client side validation in HTML5 forms, users no longer have to wait to complete all the inputs and submit the information to the server to figure out if there were any bad inputs. In fact, the markup elements can dictate whether they are a required input or not and this logic will get exercised before the Submit button sends the inputs to the remote server.

 

Let us take a look at a few attributes that support client side validation.

 

'required'

The required attributes which can be specified on any input markup element to annotate any field which is required.

A simple declaration is shown below.

<!DOCTYPE html>

<html>

<head>

<style>

textarea:required:invalid, input:required:invalid {

background-color: lightyellow;

}

</style>

</head>

<body>

<header>

<h1>Validation demo</h1>

<p>Demo showing HTML5 validation</p>

</header>

<footer>

<h1></h1>

<p>HTML Goodies</p>

</footer>

<form id="myform" action="#">

<input id="name" required><br>

<input id="phone"><br>

<input id="zip" required><br>

<input type="submit">

</form>

</body>

</html>?

When the above HTML is rendered in a modern browser, you can see that the textboxes get a different shade (because of the style we specified for required elements). When the user skips over a required field (by clicking on it and then clicking away without input), the input boxes get a red border around them.

Such styling can help communicate to the user that input is required by using client-side validation.

HTML5 validation kicks in when the form is submitted (user clicks the Submit button). When this happens, the browsers starts going through its list of required inputs and prompts when the input is missing on the required inputs.

Sometimes, there is a need to suspend validation. In such cases, we can set the "novalidate" attribute on the form.

 

For example, the following code will not result in client side validation rules to fire up.

<!DOCTYPE html>

<html>

<head>

<style>

textarea:required:invalid, input:required:invalid {

background-color: lightyellow;

}

</style>

</head>

<body>

<header>

<h1>Validation demo</h1>

<p>Demo showing HTML5 validation</p>

</header>

<footer>

<h1></h1>

<p>HTML Goodies</p>

</footer>

<form id="myform" action="#" novalidate>

<input id="name" required><br>

<input id="phone"><br>

<input id="zip" required><br>

<input type="submit">

</form>

</body>

</html>?

 

If you want to skip validation only when the specific button is pressed, you can specify "formnovalidate" attribute on the submit input type.

<!DOCTYPE html>

<html>

<head>

<style>

textarea:required:invalid, input:required:invalid {

background-color: lightyellow;

}

</style>

</head>

<body>

<header>

<h1>Validation demo</h1>

<p>Demo showing HTML5 validation</p>

</header>

<footer>

<h1></h1>

<p>HTML Goodies</p>

</footer>

<form id="myform" action="#" >

<input id="name" required><br>

<input id="phone"><br>

<input id="zip" required><br>

<input id="button1" type="submit" >

<input id="button2" type="submit" formnovalidate>

</form>

</body>

</html>?

 

When we click on the first button, we see the validation rules fire it, but when we click the second button, no validation rules are fired.

Summary

In this article, we learned how HTML5 validation works. I hope you have found this information useful.

 

About the author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508

 

 

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date