Проверьте, поддерживает ли браузер встроенную проверку 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 form validation modernizr safari. Вы также можете воспользоваться Modernizr нагрузки

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

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

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

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

Как насчет

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

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

Answer 4

Существует проблема с навигаторами, как 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 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. Комбинацию этих тестов можно использовать для проверки того, где браузер не поддерживает проверку, и сообщать, где браузер не сообщает.