Verificare se un browser ha una convalida del modulo HTML5 integrata?

Question

Come verificare se un browser ha una capacità di convalida del modulo HTML5 integrata? In questo modo, non è necessario applicare le funzioni di convalida del modulo jQuery sui browser che possono convalidare il modulo da soli.

[Risolto] in base alla risposta del ThinkingStiff, ecco un modo:

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

Answer 1

sufficiente verificare che la funzione checkValidity() esiste:

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

function hasFormValidation() { 

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

}; 

chiamare in questo modo:

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

Answer 2

È possibile farlo utilizzando Modernizr javascript http://www.modernizr.com/. Puoi ricevere aiuto da questo post html5 form validation modernizr safari. È inoltre possibile usufruire di carico Modernizr

La sintassi di base per Modernizr.load() è quello di passare un oggetto con le seguenti proprietà:

• prova: La proprietà Modernizr si vuole rilevare.
• sì: la posizione dello script che si desidera caricare se il test ha esito positivo. Utilizzare un array per più script.
• no: la posizione dello script che si desidera caricare se il test ha esito negativo. Utilizzare un array per più script.
• completo: una funzione da eseguire non appena lo script esterno è stato caricato (facoltativo).

Entrambi yep e nope sono facoltativi, purché ne venga fornito uno.

Per caricare ed eseguire lo script in check_required.js, aggiungere il seguente blocco dopo modernizr.adc.js è stato associato alla pagina (il codice è in required_load.html):

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

Fonte: http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html

Answer 3

Come su

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

Fonte: http://diveintohtml5.info/everything.html#novalidate

Answer 4

C'è un problema con i navigatori come l'Android uno (versioni precedenti alla 4.4), che implementa checkValidity (e questa funzione in effetti controlla gli input) ma il browser non fornisce alcuna informazione all'utente (e invia il modulo) se qualche input non è valido.

Tuttavia, è possibile controllare se c'è qualche problema con validationMessage. Questa proprietà mostra il messaggio di errore che il browser mostrerà all'utente. Se checkValidity() è falso ma non c'è il validationMessage il browser non ha il supporto per la convalida del modulo html5 completo.

Ho eseguito questa funzione.Richiede come argomenti tutti i campi del modulo:

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

Esempio: http://jsfiddle.net/pmnanez/ERf9t/2/

Answer 5

I seguenti test non ha funzionato per Safari:

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

e

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

Segnalano true quando era previsto false, poiché Safari non segnala campi non validi.

Tuttavia, questo test funziona:

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

(non testato su IE o Android)

EDIT: Safari fa convalidare, ma non riporta, il che spiega le risposte questi test I campi non validi possono essere scoperti tramite la pseudo classe CSS :invalid. Una combinazione di questi test può essere utilizzata per convalidare il punto in cui il browser non supporta la convalida e segnalare dove il browser non segnala.