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 the functionality with jquery if modernizr fail the test:

Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder

with other browsers (firefox, chrome and opera) the browser validate the form

in ie jquery replace the validation function

in safari it dosen't work, modernizr seems to return true while testing html5 compatibilies:

yepnope(
{
    test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder,
    nope : 'http://www.trustweb.it/webforms_home.js'
});

Answer 1

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

Answer 2

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 3

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