Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 Form Validation

DZone's Guide to

HTML5 Form Validation

· Java Zone
Free Resource

Build vs Buy a Data Quality Solution: Which is Best for You? Gain insights on a hybrid approach. Download white paper now!

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.


Build vs Buy a Data Quality Solution: Which is Best for You? Maintaining high quality data is essential for operational efficiency, meaningful analytics and good long-term customer relationships. But, when dealing with multiple sources of data, data quality becomes complex, so you need to know when you should build a custom data quality tools effort over canned solutions. Download our whitepaper for more insights into a hybrid approach.

Topics:

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}