Comments on: HTML5 Form Validation on SUMO

By: Dave Hulbert

Dave Hulbert — Tue, 15 Mar 2011 12:59:45 +0000

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.

By: fr

fr — Tue, 15 Mar 2011 10:17:50 +0000

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?

By: nemo

nemo — Tue, 15 Mar 2011 02:13:36 +0000

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.

By: Niels Muller Larsen

Niels Muller Larsen — Mon, 14 Mar 2011 22:38:34 +0000

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

By: Chris Coyier

Chris Coyier — Mon, 14 Mar 2011 22:31:29 +0000

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)

By: marcoos

marcoos — Mon, 14 Mar 2011 22:30:18 +0000

@Anonymous:

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

Or simply use Modernizr.

By: Anonymous

Anonymous — Mon, 14 Mar 2011 18:34:21 +0000

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?

By: the_dees

the_dees — Mon, 14 Mar 2011 17:37:56 +0000

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.

By: MT

MT — Mon, 14 Mar 2011 16:54:18 +0000

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.