Quick Tip: Easy form validation with HTML5

When you collect information from people through a form, applying some kind of validation is a must. Failing to do so could lead to lost customers, junk data in your database or even security exploits of your website. Historically, building form validation has been a pain. On the server side, this is made easier by full stack frameworks which handle it for you, but on the client you often end up with JavaScript libraries that take a lot of effort to integrate.

Thankfully, HTML5 gives us a number of features that can handle most of your validation needs. Forms in HTML5 now have built-in support for validation through the use of special attributes and new input types, and give you a lot of control over styling with CSS.

See an online demo here and read a quick overview of the basics behind HTML5 form validation below.

1. Specialized Input Types

HTML5 introduced several new input types. They can be used to create input boxes, which will accept only a specified kind of data.

The new input types are as follows:

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

To use one of the new types, include them as the value of the type attribute:

<input type="email"/>

If the browser does not support the given input type, the field will behave as a regular text input. Also, it's helpful to know that some of the input fields (such as "email" and "tel") will cause a mobile devices to open specialized keyboards with a limited set of keys, and not the full QUERTY layout.

For more details on all the input types, head out to this MDN wiki - here.

2. Required Fields

By simply adding the "required" attribute to a <input>, <select> or <textarea>, you tell the browser that a value must be provided in this field. Think of this as the red asterisk* we see in most registration forms.

<input type="checkbox" name="terms" required >

The problem here is that nearly any data will fulfill this requirement - for example you can bypass it with an empty space (we'll show you how to prevent this in a moment).

When you set the required attribute on email or url fields, the browser expects a certain pattern to be followed, but it's very permissive and emails such as "z@zz" are considered valid (read on to see how to work around this).

3. Limits

We can set some basic limitations like max length and minimum and maximum values for number fields. To limit the length of input fields and textareas, use the "maxlength" attribute. What this does is to forbid any string longer than the field's "maxlength" value to be entered at all. If you try and paste a string witch exceeds this limit, the form will simply clip it.

<input type="text" name="name" required  maxlength="15">

The <input type="number"> fields use "max" and "min" attributes to create a range of possible values - in our example we've made the minimum allowed age to be 18 (too bad you can be whatever age you want on the internet).

<input type="number" name="age" min="18" required>

4. Styling

CSS3 pseudo classes let us style any form field depending on its state. They are:

• :valid
• :invalid
• :required
• :optional
• :in-range
• :out-of-range
• :read-only
• :read-write

This means that you can have required fields look one way, optional ones another and so on.

In our demo we've combined the "valid" and "invalid" selectors with the "focus" pseudo class to color form fields red or green when the user selects them and starts typing.

input:focus:invalid,
textarea:focus:invalid{
    border:solid 2px #F5192F;
}

input:focus:valid,
textarea:focus:valid{
    border:solid 2px #18E109;
    background-color:#fff;
}

5. Tooltips

As you've probably noticed, when you try to submit a form that's not correctly filled, a pop-up appears. By setting the "title" attribute of our fields, we can add additional hints on what values our rules validation expects.

Note that different browsers display the pop-ups in differently. In Chrome, the title attribute value will appear under the main error-message text in smaller font. In Firefox it doesn't show your custom tooltip text at all, unless you've used the "pattern" attribute as well, which then is taken as a pattern info.

<input type="text" name="name" title="Please enter your user name.">

The error boxes or their default content can't be changed that simply and require the help of JavaScript, but that's a whole other tutorial.

6. Patterns

The "pattern" attribute lets developers set a Regular Expression, which the browser will match against the user supplied input, before allowing the form to be submitted. This gives us great control over the data entries, since RegEx patterns can be quite complex and precise. To learn more about Regular Expressions, check out our article - Learn Regular Expressions in 20 Minutes.

Now, with the ability to filter out input values, our example form accepts only full email addresses and a password with a minimum length of 8 characters, including at least one number.

Here's how to use it:

<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="[email protected]">

We hope that this quick tip helped you get up to speed with HTML5's validation features. Thanks for reading!