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

Question

Как проверить, имеет ли браузер встроенную возможность проверки формы HTML5? При этом нам не нужно применять функции проверки формы jQuery к браузерам, которые могут проверять форму самостоятельно.

[Решено] Исходя из ответа ThinkingStiff, вот способ:

if (typeof document.createElement("input").checkValidity == "function") {
    alert("Your browser has built-in form validation!");
}

Answer 1

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

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

function hasFormValidation() {

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

};

Назовите это так:

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

Answer 2

Вы можете сделать это, используя Modernizr javascript http://www.modernizr.com/. Вы можете получить помощь из этого поста Проверка формы HTML5 Modernizr Safari . Вы также можете воспользоваться Modernizr нагрузки

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

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

И да, и нет не обязательны, если вы предоставите один из них.

Чтобы загрузить и выполнить сценарий в файле 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

Answer 3

Существует проблема с навигаторами, такими как Android (версии до 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/

Answer 4

Как насчет

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

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

Answer 5

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

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

и

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

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

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

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

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

РЕДАКТИРОВАТЬ: Safari проверяет, но не сообщает, что объясняет ответы на эти тесты.Неверные поля можно обнаружить с помощью псевдокласса CSS :invalid.Комбинация этих тестов может использоваться для проверки того, где браузер не поддерживает проверку, и для отчета, когда браузер не сообщает.