HTML5 صحة النموذج modernizr سفاري

Question

هذا هو مثال العمل: http://jsfiddle.net/trustweb/stsmw/

لاحظت errore باستخدام Safari 5.05

إذا قمت بتعيين نموذج كما هو الحال في صفحة HTML5 وأرسلت الوظيفة باستخدام jQuery إذا فشل modernizr في الاختبار: giveacodicetagpre.

مع المتصفحات الأخرى (Firefox، Chrome and Opera) يقوم المتصفح بالتحكم في النموذج

في ie jQuery استبدل وظيفة التحقق من الصحة

في Safari لا يعمل، يبدو أن Modernizr يبدو صحيحا أثناء اختبار Compatibilies HTML5: giveacodicetagpre.

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