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

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

<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. ``` ```
``` ```
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. ``` ```
``` ```
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. ``` ```
``` ```
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. ``` ```
``` ```
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. ``` ```
``` ```
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. ``` ```
``` ```
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. ``` ```
``` ```
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. ``` ```
### HEX Values To ensure that the input box only accepts HEX values you can use the pattern attribute with a regular expression. ``` ```
## 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. ``` ```
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. ```
``` See the Pen [ONbwvp](http://codepen.io/paulund/pen/ONbwvp/) by Paul ([@paulund](http://codepen.io/paulund)) on [CodePen](http://codepen.io).

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email