html5 form validation modernizr safari

Question

this is the working example: http://jsfiddle.net/trustweb/sTSMW/

i notice an errore using safari 5.05

if i set a form as in an html5 page and i repleace th

Answer 1

actually i did't find how to do just with modernizr, so i implemented this check:

var browser=navigator.userAgent.toLowerCase();
if (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1) browser='safari';


yepnope(
{
    test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && browser!='safari',
    nope : 'javascript/webforms_home.js'
});

Answer 2

This is how I solved the same problem. It uses Modernizr, yepnope, and jQuery.

    yepnope({
       test : Modernizr.inputtypes.email && Modernizr.input.required && 
              Modernizr.input.placeholder && && !jQuery.browser.safari,
       nope : ['js/webforms_home.js']
    });

jQuery Browser API

Answer 3

The reason why Modernizr says that email/required attributes are supported in Safari 5, is that they are supported and you can use the constraint validation API (i.e. input.checkValidity(), input.validity etc.). Safari 5.0.x has no validation UI and this is the reason, why they have turned off so called interactive form validation ( = preventing submit and showing an errormessage, if validation fails).

Actually, your browser sniffing isn't right. Chrome already supports HTML5 from validation and Safari 6 will support it also. This said a possible more futureproof, could look like this:

yepnope(
{
    test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && ( !$.browser.webkit || parseInt($.browser.version, 10) > 533),
    nope : 'javascript/webforms_home.js'
});

You can find some extra tests regarding form validation here.

Update: Modernizr has now an additional feature detect for interactive constraint validation