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'
});

It's weird.. you should report it to paul irish.. :) ..btw, to solve this problem atm you could check if browser is safari and add it to the test. — stecb, May 17 '11 at 12:26
yeah, i'going to report it to Paul.how with html5 + javascript? or you mean in server side way? — Michele, May 17 '11 at 13:16
It's a simple JS check.. like var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') ..or using jQuery browser detection.. if you add this in your test i.e. test : Modernizr.... & ... & ... & !isSafari . Ciao! :) — stecb, May 17 '11 at 13:23
Modernizr.input.required is almost too painful to implement, which checks needed for both Safari (which doesn't html5 validate) and Opera11 (which validates but no validation styling) — bcm, Dec 21 '11 at 03:12

score 8 · Accepted Answer · edited Jun 19 '13 at 23:24

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

score 1 · Answer 2 · answered Oct 23 '12 at 22:02

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

Michele · Answer 3 · 2011-05-17T14:49:25.193

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'
});

edited May 17 '11 at 14:49

answered May 17 '11 at 14:04

Michele

1,468
3
24
54

html5 form validation modernizr safari

3 Answers3

Linked