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.


Handling IE 7 & 8

IE7 and 8 (yes, they are still around), by default, do not recognize the most HTML5 elements. To have these older versions of IE recognize all HTML5  elements, you can programmatically create them through JavaScript as part of the DOM and then style them accordingly, as in this example:

Of course, doing that for every single new HTML5 element would be a little tedious, and chances are that you would miss something.

Luckily, you can use something called HTML5Shiv (http://code.google.com/p/html5shiv), written by Remy Sharp, which includes all the new elements and another bit of JavaScript called IE Print Protector, which helps IE display HTML5 elements correctly. The “shiv” is designed to allow versions prior to IE9 to recognize the HTML5 elements and allow them to be styled using CSS.

Even though the script has conditional code within, so it runs only in IE, you might as well wrap it in a conditional comment of your own so only IE 8 and older download and run the code. This script must go in the head tag and before style sheet calls. It is up to you if you prefer to serve the html5shiv file locally or link directly to the http://googlecode.com-hosted file.

Having the file locally will prevent both “resource not found” from any remote access issues and breakages due to future modifications to the JavaScript file.

Reference: http://www.paulirish.com/2011/the-history-of-the-html5-shiv/

Making CSS Compatible

Now that you can make IE support new HTML5 elements, you need to make it play nice with CSS. Most modern browsers know how to handle the new elements by default and without any styling; however, to make sure IE plays nice, you need to set your new elements to display: block.

If you use a CSS reset, you could include the code above, or there are various CSS resets currently available that include the HTML5 fixes:

 Polyfilling

Being able to detect what HTML5 features are supported, is only half the battle. Ultimately the goal is to be able to support the HTML5 functionality in the various browsers and versions of browsers that your users use to visit the web applications and sites you create. To allow for browsers that do not support a specific HTML5 functionality, you would need to use a third-party library that includes code for the various browsers to have the same functionality. The code or library of code that allows the feature to be supported on browsers is called a polyfill or polyfiller.

An example of a polyfiller could be a library that provides canvas support for Internet Explorer since Internet Explorer does not support the canvas element directly but has its own drawing functionality such as Silverlight. You want to be able to develop with the new APIs and still offer the same experience to browsers that do not support them natively. We have seen examples of using a JavaScript library such as jQuery to plug some of the gaps, but there is no one library that will fix everything.

Reference: http://html5please.com/#polyfill


Page 2 of 212