HTML5 form support

[hotmeteor]

I added support for HTML5 by automatically attaching the required attribute to the form. I considering making it try to detect the context, but then realized that the issue might be larger than just type="email", so it applies to every form.

Sorry for two commits, just getting the hang of this.

[jzaefferer]

Copy of an email conversation on html5 validation:

I'm about to start adding some client-side validations to an
application and I'd like to use the HTML5 attributes (required,
type="url/email/range", pattern="[regex]") and then use jQuery to
up-convert for browsers that don't yet have validations support. Would
you be interested in my adding a method to jQuery-validation that
searches the page for inputs that have HTML5 validation attributes and
add jQuery-validation to them? If not, I'd be happy to release it as a
separate library, though it's a fairly small amount of code.

(NB: jQuery-validation and HTML5 have different opinions on one
aspect: jQuery-validation eschews generic regex validation, while
HTML5 strongly supports it so long as you also have a title attribute
describing the regex requirement.)

-James
Reply
Forward
James is not available to chat
Reply to all
Jörn Zaefferer to James
show details 2010-08-24
Hi,

the plugin already reads normal DOM attributes, so as long as html5 names match methods provided by the plugin (required, min, max, minlength (not sure here), maxlength (yeah...), it works already. Whats missing is disabling the html5 validation when the plugin is active, to avoid interference.

Support for the type-attribut is really the interesting part. The plugin supports url and email, but not specified via type="...".

The pattern method could be added very easily, once present, it'll get picked up automatically.

In regards to the title attribute: If nothing more specific then the generic message for a given message is provided, the title-attribute, if present, gets used. So if you do $.validator.addMethod("pattern", function(value, element, regex) { ... }) (without the message argument), it should work very similar to html5.

And while at it, adding a bit of aria support (like aria-required) would be really easy, too.

Eventually I'll work on this myself, but your help to get this done faster is very welcome!

Regards
Jörn

• Show quoted text -
  Reply
  Forward
  James is not available to chat
  Reply to all
  James Rosen to me
  show details 2010-08-24
  Nice response, thanks! I'll start with disabling the plugin's
  automatic stuff when the browser supports validation. Perhaps we could
  check for Modernizr and turn off the plugin if Modernizr exists and
  has detected support. I'd hate to try to repeat the work they've done
  on feature detection.

There are a few things I didn't see in the plugin (though I may not
have looked hard enough):

1. bind oninput -- or at least onchange -- to validate, which browsers
   seem to do
2. set the appropriate validation result properties on the DOM object
   (validity.valid, validity.valueMissing, validity.typeMismatch,
   validationMessage)
3. Show quoted text -
   Reply
   Forward
   James is not available to chat
   Reply to all
   Jörn Zaefferer to James
   show details 2010-08-24
   Last time I checked, the html5 validation was way simpler then what the plugin did - at the time only Opera had support... dunno how much that changed, but display the html5 validation would be an alternative to turning of the plugin, depends on what result you want. Modernirz is certainly the right lib to use - it has something for the type-attribute, too.

The plugin validates on blur, with a few restrictions outlined here: http://docs.jquery.com/Plugins/Validation/Reference#Validation_event

Whats the point of the plugin setting these properties? Does any kind of mixed mode really make sense?
This could get interesting in regards to screenreaders conflicting between the relevant aria-attributes and html5-validation-attributes... I'd hope for the html5-validation to also set the right aria-attributes, so that screenreaders can rely solely on those.

• Show quoted text -
  Reply
  Forward
  James is not available to chat
  Reply to all
  James Rosen to me
  show details 2010-08-24
  Safari 5.0 also supports validations. It validates oninput (every time
  the value changes), but I could see that being too much processing to
  do in Javascript.

I'm not entirely sure what the benefit of all of the different
validity.* states is. All I know is that I don't want to have to check
both them and the element's metadata to find out the validity state
programmatically.

Additionally, HTML5 validation will fire an oninvalid event when
validation runs on an element that fails validation. There is no
onvalid event defined.

Oh, and one last thing: there is a formNoValidate attribute on <input
type='submit'> and a noValidate attribute on

that turn off
validation for the form. See
http://www.w3.org/TR/html5/association-of-controls-and-forms.html#attr-fs-novalidate

[tedberg]

See: http://plugins.jquery.com/content/html-5-input-attribute-required-breaks-required-rule-found-class-and-attribute

[jzaefferer]

Thanks for the contribution. I ended up adding the one line myself, but more importantantly, along with a change to also support reading the type-attribute. Thanks to getAttribute that even works in IE6.