Проверка формы HTML5 Modernizr Safari - PullRequest
Новая
       6

Проверка формы HTML5 Modernizr Safari

6 голосов
/ 17 мая 2011

это рабочий пример: http://jsfiddle.net/trustweb/sTSMW/

я замечаю ошибку, используя safari 5.05

, если я устанавливаю форму, как на странице html5, и я заменяю функциональность jquery, если modernizrпровалить тест: 

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

с другими браузерами (Firefox, Chrome и Opera) браузер проверяет форму

в т. е. jquery заменить функцию проверки

в Safari этоне работает, как представляется, modernizr возвращает true при тестировании совместимости с html5: 

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

Ответы [ 3 ]

8 голосов
/ 20 мая 2011

Причина, по которой Modernizr говорит, что электронная почта / обязательные атрибуты поддерживаются в Safari 5, заключается в том, что они поддерживаются, и вы можете использовать API проверки ограничений (т.е. input.checkValidity (), input.validity и т. Д.). Safari 5.0.x не имеет пользовательского интерфейса для проверки, и по этой причине они отключили так называемую проверку интерактивной формы (= предотвращение отправки и отображение сообщения об ошибке, если проверка не пройдена).

На самом деле, ваш браузер нюхает не правильно. Chrome уже поддерживает HTML5 из ​​проверки, и Safari 6 также будет поддерживать его. Это говорит о том, что возможно более перспективно на будущее, может выглядеть так: 

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

Вы можете найти дополнительные тесты для проверки формы здесь .

Обновление : Modernizr теперь имеет дополнительную функцию обнаружения для интерактивной проверки ограничений

1 голос
/ 24 октября 2012

Вот так я решил ту же проблему.Он использует Modernizr, yepnope и jQuery. 

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

API браузера jQuery

1 голос
/ 17 мая 2011

На самом деле я не нашел, как это сделать с Modernizr, поэтому я реализовал эту проверку: 

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