HTML5 Form Validation on SUMO

Ricky Rosario

9 responses

HTML5 has a lot of buzz lately and lots of demos showing off it’s capabilities are popping up. Most demos show off the rich interactive features that were previously limited to flash. That is awesome because it grabs people’s attention and gets them excited but, as a web developer, I think one of the most useful and underrated features are in HTML5 Forms. I can’t even count how many times I have had to write form validation code in JavaScript. A future in which browsers do all this for me is a future I love!

On SUMO, we are using some of the new HTML5 Form features throughout the site. Below are some examples with screenshots.

required="required"

Adding required="required" attribute to a form field, prevents the form submission if the field is left empty.

Firefox 4:
Firefox 4 screenshot

Chrome 10:
Chrome 10 screenshot

Opera 11:
Opera 11 screenshot

type="email"

The email input field validates that the value entered is a valid email address.

Firefox 4:
Firefox 4 screenshot

Chrome 10:
Chrome 10 screenshot

Opera 11:
Opera 11 screenshot

type="url"

The url input field validates that the value entered is a valid URL. (Although, it does seem to accept some questionable values on Firefox 4.)

Firefox 4:
Firefox 4 screenshot

Chrome 10:
Chrome 10 screenshot

Opera 11:
Opera 11 screenshot

pattern="regex"

The pattern attribute allows you to require the entered values to match a regular expression pattern. On the user profile pages on SUMO, we have optional fields for users to enter their Twitter and Facebook URLs. We are able to restrict these to the correct domain with pattern="https?://(?:www\.)?twitter\.com/.+" and pattern="https?://(?:www\.)?facebook\.com/.+".

Firefox 4:
Firefox 4 screenshot

Chrome 10:
Chrome 10 screenshot

Opera 11:
Opera 11 screenshot

But what about Internet Explorer?

You probably noticed there are no screenshots for IE (or Safari). Unfortunately, IE9 and Safari 5 don’t support any of this yet :(. If you really need client side validation and care about IE users, you won’t be tossing your JavaScript validation any time soon. But you should still use these new attributes so your site is ready for IE10 ;). In the meantime, you can use feature detection to only run JavaScript validation when the browser doesn’t do it for you.

There are a lot more new HTML5 form fields, some yet to be supported. Some come with cool widgets (input type="color" will have a color picker). We don’t have a big need for these on SUMO, as our forms are mostly basic text fields, but it’s exciting to look at what’s coming. Check out diveintohtml5 for a more comprehensive look at HTML5 forms. Also be sure to check out all the HTML5 & Friends dashboard.

Please remember that client side validation, whether native in the browser or added via JavaScript, is no substitute to server side validation. It just improves the User Experience and saves some HTTP round trips.

Are you using HTML5 forms yet?

9 responses

  1. MT wrote on :

    Unfortunately, “required” fields that are not empty but contain only _whitespace_ are considered valid by HTML5-browsers. So, in practice, we are forced to use JavaScript _anyway_.

    By the way, in HTML5, there are no more reasons to duplicate name of boolean attribute in its value. So, instead required=”required” we can just use required with no value at all.

  2. the_dees wrote on :

    I hope you don’t use these fields internationally, because Firefox and Opera (I don’t know about Chrome 10) don’t accept International Domain Names in the type=”email” state.

  3. Anonymous wrote on :

    Ideally, if you see type=”email”, you could make it easy for the user to fill in their own email address.

    Hopefully, someone will build a script that adds HTML5 form validation to browsers that don’t support it, by looking at the new attributes. Except, how do you transparently tell if the browser already supports HTML5 form validation?

  4. marcoos wrote on :

    @Anonymous:

    if (“checkValidity” in document.createElement(“form”)) {
    alert(“Your browser supports html5 form validation”);
    }

    Or simply use Modernizr.

  5. Chris Coyier wrote on :

    Awesome job highlighting HTML5 form validation Ricky!

    Couple quickies:

    – Safari 5 Windows is still validating I think. It was on Mac, but then it must have been nerfed at one of the 5.0.x updates. It was very primitive though, it just put offending fields in focus.

    – The screenshots highlight a “bug” in Chrome, where removing the padding from the div element makes those popup validation bubbles really cramped and sorta bad looking. Quick fix, when you remove the padding from div elements, make sure it’s body > div.

    – For folks interested in customizing those messages, check out .setCustomValidity in JavaScript (not 100% sure browser compatibility but is has some)

  6. Niels Muller Larsen wrote on :

    You might look at http://www.modernizr.com/ for the Modernizr JS library.
    Also take a look at findmebyip.com.

  7. nemo wrote on :

    How about attempting to submit an invalid form in a hidden iframe?

    I suppose checking on whether novalidate or required exist on form elements might work too.

  8. fr wrote on :

    The message shown when failing to match the regex pattern is rather vague and unhelpful to the user, is it possible for the site developer to specify the not a match message to make it clear what is expected?

  9. Dave Hulbert wrote on :

    Check out the JavaScript polyfills for older browsers here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

    There’s a whole section on web forms.