HTML5

HTML5 Form Validation

Since HTML5 came into webpages it brought a bunch of new features, the most useful features it brings is the functionality that you would normally use JavaScript for. An very good example of how HTML5 can help us with forms is client side form validation.

In the past we would create a form on a page and then setup the JavaScript on the OnSubmit event to then check the values are how we want them to be. The most common query would be to check that all required fields are not empty.

if(document.getElementById('username').value == '')
{
    alert('Username can not be empty.');
}

If you have a form that has a lot of input boxes then your JavaScript can quickly become huge, all with checks that the form field is a required field. Or you will have to do checks that the value entered is a number, an email address, a telephone number etc. This is where HTML5 comes into it's own, HTML5 comes with some new attributes that you can use to do these type of checks without having to write any JavaScript.

There are 3 new attributes that you need to be aware of in HTML5 form validation the type attribute, pattern and require.

Type Attribute

The type attribute is want you would normally use to define that a form field is a textbox or a checkbox or a radio button.

<input type="text" />
<input type="checkbox" />
<input type="radio" />

With HTML5 it comes with a bunch of new type values that will bring form validation.

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Color Input Type

The color input type will add a color picker to your form allowing the user to select a color which will add a HEX value to the input.

<input type="color" />

There is no validation improvements that come with this input type it will just add a color picker to the page.

Date Input Type

The date input type will allow you to add a date picker to your form.

<input type="date" />

The validation that you get with this field can only enter numbers in the input box.

Email Input Type

The email input type will add a new textbox to the browser.

<input type="email" />

The form validation you get with this is that on submit the value must be a valid email address.

Month Input Type

The month input type will add a new textbox to the browser allowing you to pick a month.

<input type="month" />

The validation that you get with this is that it ensures the user can only select a month and year.

Number Input Type

The number input type will add a new textbox to the browser allowing you to pick a single number.

<input type="number" />

The validation that you get with this is that it ensures the user can only enter a number.

Range Input Type

The range input type will add a new slider to the browser allowing you to pick from a range of numbers.

<input type="range" min="1" max="10" />

The validation that you get with this is that it ensures you can only select numbers within a certain range.

Search Input Type

The search input type adds a textbox to the browser which allows you to add a search box to the page.

<input type="search" />

You do not get any new validation features with this input type.

Time Input Type

The time input type will allow you to add a time picker to your form.

<input type="time" />

The validation you get with this is that it allows you to ensure the user can only enter a time.

Url Input Type

The URL input type will add a textbox to the browser which ensures a URL is entered.

<input type="url" />

The validation you get with this is that when the form is submitted the browser checks to see if this value is a URL.

Week Input Type

The week input type adds a date picker to the browser that allows the user to select a week of a year.

<input type="week" />

The validation you get with this is that you ensure the user can only select a certain week.

Pattern Attribute

The pattern attribute allows you to define your own set of rules that the input type must compile to, the rules use regular expression to define what these fields accept.

Only Letters

For example if we want to make sure that the input box only accepts letters then we can use the following code.

<input type="text" pattern="[a-zA-Z]+" title="Only enter letters" />

HEX Values

To ensure that the input box only accepts HEX values you can use the pattern attribute with a regular expression.

<input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" title="HEX Values" />

Required Attribute

The required attribute is the attribute that you will most likely use the most. This attribute ensures that this input box is not empty, placing it on a textbox element will check the value on the submit event and if the value is empty a error message will be displayed.

This attribute is what you will use to replace the JavaScript code example at the start of the tutorial.

<input type="text" required="true" />

Hopefully from the above tutorial you can see all the different ways that you can use the new HTML5 validation rules and how they can help you write less JavaScript validation in your future projects.

Remove HTML5 Validation

Although HTML5 validation is great and can make things a lot easier for you in the form development, you want to turn off HTML5 validation from the form by simply adding a novalidate to the form tag.

<form method="post" action="" novalidate>

</form>

See the Pen ONbwvp by Paul (@paulund) on CodePen.

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial