HTML5 input types kill jQuery validation

Question

The jQuery validation plugin breaks for elements that have a HTML5 type defined.

$(document).ready(function(){
$("#myform").validate() 
});
...
<form id="myform">
<input id="email" email="true" />
</form>
...

Adding the html5 attribute type="email" to the input causes the validation to fail. I want to use type="email" because mobile phones use this attribute to display the proper keyboard layout by default.

What's the best way to achieve both mobile phone friendly keyboards + jquery Validation library?

You can see an example of the issue here.

Answer 1

You might be able to merge this pull request with the main trunk, if you're willing to maintain your own version of the plugin (the patch is quite small and, from a cursory look at the code, seems like the right thing to do, though it would certainly require testing).

You may also be able to fallback to just using the HTML5 required field (potentially supported by non-javascript-enabled clients), but see this issue.

Answer 2

That problem has already been filed. See this bug report: http://plugins.jquery.com/content/html-5-typeemail-prevents-inline-validation-required-email-field

Luckily, there is now a working jQuery plugin for this: http://plugins.jquery.com/project/simple_email_validate

Hope it helps. ;)