Sprawdź, czy przeglądarka ma wbudowaną weryfikację formularza HTML5?

Question

Jak sprawdzić, czy przeglądarka ma wbudowaną możliwość sprawdzania poprawności formularza HTML5? W ten sposób nie musimy stosować funkcji sprawdzania poprawności formularzy jQuery w przeglądarkach, które same mogą sprawdzać poprawność formularza.

[Solved] podstawie odpowiedzi ThinkingStiff, oto jest droga:

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

Answer 1

Wystarczy sprawdzić, czy funkcja checkValidity() istnieje:

Demo: http://jsfiddle.net/ThinkingStiff/cmSJw/

function hasFormValidation() { 

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

}; 

nazwać to tak:

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

Answer 2

Można to zrobić za pomocą modernizr javascript http://www.modernizr.com/. Możesz wziąć pomoc z tego posta html5 form validation modernizr safari. Można również skorzystać z modernizr obciążenia

Podstawowa składnia Modernizr.load() jest przekazać mu obiekt z następującymi właściwościami:

• Test: Właściwość modernizr chcesz wykryć.
• yep: Lokalizacja skryptu, który chcesz załadować, jeśli test się powiedzie. Użyj tablicy dla wielu skryptów.
• nop: Położenie skryptu, który chcesz załadować, jeśli test się nie powiedzie. Użyj tablicy dla wielu skryptów.
• complete: Funkcja uruchamiana zaraz po załadowaniu zewnętrznego skryptu (opcjonalnie).

Zarówno tak jak i nie są opcjonalne, o ile dostarczono jedno z nich.

Aby załadować i wykonać skrypt w check_required.js dodaj następujący blok po modernizr.adc.js został dołączony do strony (kod jest w required_load.html):

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

Źródło: http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html

Answer 3

Jak o

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

Źródło: http://diveintohtml5.info/everything.html#novalidate

Answer 4

Jest problem z nawigatorów jak Android jednego (wersje przed 4.4), który implementuje checkValidity (a ta funkcja w rzeczywistości sprawdza wejścia), ale przeglądarka nie dostarcza żadnych informacji do użytkownika (i wysyła formularz), jeśli niektóre dane wejściowe są nieprawidłowe.

Można jednak sprawdzić, czy jest jakiś problem przy użyciu validationMessage. Ta właściwość wyświetla komunikat o błędzie, który przeglądarka wyświetli użytkownikowi. Jeśli checkValidity() ma wartość false, ale nie ma validationMessage, przeglądarka nie obsługuje pełnego sprawdzania poprawności formularza HTML5.

Zrobiłem tę funkcję.Wymaga ona jako argumenty wszystkie pola formularza:

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; 
} 

Próbka: http://jsfiddle.net/pmnanez/ERf9t/2/

Answer 5

Poniższe testy nie działa dla Safari:

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

i

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

Zgłoszono true, gdy oczekiwano false, ponieważ Safari nie zgłasza nieprawidłowych pól.

Jednak badanie to działa:

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

(nie testowane na IE lub Android)

EDIT: Safari ma potwierdzić, ale nie zgłasza, co tłumaczy reakcje na te testy. Nieprawidłowe pola można wykryć za pomocą pseudo klasy CSS :invalid. Połączenie tych testów może służyć do sprawdzania, gdzie przeglądarka nie obsługuje sprawdzania poprawności, i zgłaszania, gdzie przeglądarka nie zgłasza.