Проверьте, имеет ли браузер встроенную проверку HTML5?

Ответ 1

Просто проверьте, существует ли функция checkValidity():

Демо: http://jsfiddle.net/ThinkingStiff/cmSJw/

function hasFormValidation() {

    return (typeof document.createElement( 'input' ).checkValidity == 'function');

};

Назовите его следующим образом:

if( hasFormValidation() ) {
    //HTML5 Form Validation supported
};

Ответ 2

Вы можете сделать это с помощью Modernizr javascript http://www.modernizr.com/. Вы можете получить помощь из этого сообщения html5 валидация версии modernizr safari. Вы также можете воспользоваться современной загрузкой

Основной синтаксис для Modernizr.load() - передать ему объект со следующими свойствами:

• test: свойство Modernizr, которое вы хотите обнаружить.
• yep: расположение script, которое вы хотите загрузить, если тест завершился успешно. Используйте массив для нескольких сценариев.
• nope: расположение script, которое вы хотите загрузить, если тест завершился неудачно. Используйте массив для нескольких сценариев.
• complete: функция, которая будет запущена сразу после загрузки внешнего script (необязательно).

Оба yep и nope являются необязательными, если вы поставляете один из них.

Чтобы загрузить и выполнить script в файле check_required.js, добавьте следующий блок после того, как к странице был прикреплен файл modernizr.adc.js(код находится в required_load.html):

<script>
  Modernizr.load({
    test: Modernizr.input.required,
    nope: 'js/check_required.js',
    complete: function() {
      init();
    }
  });
</script>

Источник: http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html

Ответ 3

Как насчет

function hasFormValidation() {
  return 'noValidate' in document.createElement('form');
}

Источник: http://diveintohtml5.info/everything.html#novalidate

Ответ 4

Существует проблема с навигаторами, такими как Android one (версии до 4.4), которые реализуют checkValidity (и эта функция фактически проверяет входы), но браузер не предоставляет никакой информации пользователю (и отправляет форму), если какой-либо ввод недействителен.

Однако вы можете проверить, есть ли какие-либо проблемы, используя validationMessage. Это свойство покажет вам сообщение об ошибке, которое браузер покажет пользователю. Если checkValidity() является ложным, но не существует validationMessage, браузер не имеет полной поддержки проверки формы html5.

Я сделал эту функцию. Он требует в качестве аргумента всех полей в форме:

canValidateFields() {    
    var result = typeof document.createElement( 'input' ).checkValidity == 'function';
    if (result) {
        for (var i = 0; i < arguments.length; i++) {
            var element = document.getElementById(arguments[i]);
            if (!element.checkValidity() && (!element.validationMessage || element.validationMessage === null || element.validationMessage === '')) {
                return false;
            }
        }
    }
    return result;
}

Пример: http://jsfiddle.net/pmnanez/ERf9t/2/

Ответ 5

Следующие тесты не работали для Safari:

'noValidate' in document.createElement('form')

и

typeof document.createElement( 'input' ).checkValidity == 'function'

Они сообщают true, когда ожидалось false, поскольку Safari не сообщает недопустимые поля.

Однако этот тест работает:

'reportValidity' in document.createElement('form')

(не тестировался в IE или Android)

EDIT: Safari проверяет, но не сообщает, что объясняет ответы на эти тесты. Неверные поля могут быть обнаружены с помощью псевдо-класса CSS :invalid. Комбинацию этих тестов можно использовать для проверки того, где браузер не поддерживает проверку, и сообщать, где браузер не сообщает.