Archive results for:

Form Validation

HTML5 web forms have introduced new form elements, input types, attributes, and other features. Many of these features we’ve been using in our interfaces for years: form validation, combo boxes, placeholder text, and the like. The difference is that where before we had to resort to JavaScript to create these behaviors, they’re now available directly in the browser; all you need to do is set an attribute in your markup to make them available.

HTML5 Form Attributes

Browsers that support these HTML5 attributes will compare data entered by the user against regular expression patterns provided by the developer (you). Then they check to see if all required fields are indeed filled out, enable multiple values if allowed, and so on. Even better, including these attributes won’t harm older browsers; they’ll simply ignore the attributes they don’t understand.

In fact, you can use these attributes and their values to power your scripting fallbacks, instead of hard-coding validation patterns into your JavaScript code, or adding superfluous classes to your markup.

The required Attribute

The Boolean required attribute tells the browser to only submit the form if the field in question is filled out correctly. Obviously, this means that the field can’t be left empty, but it also means that, depending on other attributes or the field’s type, only certain types of values will be accepted.

If a required field is empty or invalid, the form will fail to submit, and focus will move to the first invalid form element. Opera, Firefox, and Chrome provide the user with error messages; for example, “Please fill out this field” or “You have to specify a value” if left empty, and “Please enter an email address” or “xyz is not in the format this page requires” when the data type or pattern is wrong.

The required attribute can be set on any input type except button, range, color, and hidden, all of which generally have a default value. The syntax is either simply required, or required=”required”.

The autofocus Attribute 

The Boolean autofocus attribute specifies that a form control should be focused as soon as the page loads. Only one form element can have autofocus in a given page.

HTML5 New Form Input Types

HTML5 gives us input types that provide for more data-specific UI elements and native data validation. HTML5 has a total of 13 new input types: search, email, url, tel, datetime, date, month, week, time, datetime-local, number, range and color.

Email Address

The email type (type=”email”) is, unsurprisingly, used for specifying one or more email addresses. It supports the Boolean multiple attribute, allowing for multiple, comma-separated email addresses.

When you focus on the email field, the iPhone, iPad, and iPod will all display a keyboard optimized for email entry (with a shortcut key for the @ symbol). Firefox, Chrome, and Opera also provide error messaging for email inputs: if you try to submit a form with content unrecognizable as one or more email addresses, the browser will tell you what is wrong.

Styling Required Form Fields

You can style required form elements with the :required pseudo-class. You can also style valid or invalid fields with the :valid and :invalid pseudo-classes.With these pseudo-classes and a little CSS magic, you can provide visual cues to sighted users indicating which fields are required, and also give feedback for successful data entry:

 

HTML5_Validation1

Older browsers mightn’t support the :required pseudo-class, but you can still provide targeted styles using the attribute selector:

Fallback using Modernizr

Now as discussed in a previous post explaining how we can use Mondernizr to detect browser support of HTML5 CSS3 capabilities, we can add code to this example for older browsers:

 

Here is a working demo example.