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

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

я замечаю ошибку при использовании Safari 5.05

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

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

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

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

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

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

3 ответа

Решение

Причина, по которой Modernizr говорит, что в Safari 5 поддерживаются атрибуты email / обязательные атрибуты, заключается в том, что они поддерживаются, и вы можете использовать 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 теперь имеет дополнительную функцию обнаружения для интерактивной проверки ограничений

На самом деле я не нашел, как это сделать с 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'
});

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

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

API браузера jQuery

Другие вопросы по тегам