¿Verifica si un navegador tiene una validación de formulario HTML5 incorporada?

Question

¿Cómo comprobar si un navegador tiene una capacidad de validación de formularios HTML5 incorporada? Al hacerlo, no necesitamos aplicar funciones de validación de formularios jQuery en navegadores que puedan validar el formulario por sí mismos.

[Resuelto] Sobre la base de la respuesta de ThinkingStiff, aquí es una manera:

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

Answer 1

Basta con comprobar si existe la función checkValidity():

demostración: http://jsfiddle.net/ThinkingStiff/cmSJw/

function hasFormValidation() { 

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

}; 

llamada así:

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

Answer 2

Usted puede hacer esto utilizando Modernizr Javascript http://www.modernizr.com/. Puede tomar la ayuda de esta publicación html5 form validation modernizr safari. También puede tomar ventaja de la carga Modernizr

La sintaxis básica para Modernizr.load() es para pasarlo un objeto con las siguientes propiedades:

• prueba: La propiedad Modernizr que desea detectar.
• yep: La ubicación de la secuencia de comandos que desea cargar si la prueba tiene éxito. Use una matriz para múltiples scripts.
• no: La ubicación de la secuencia de comandos que desea cargar si la prueba falla. Use una matriz para múltiples scripts.
• completa: Una función que se ejecutará tan pronto como se haya cargado el script externo (opcional).

Tanto el sip como el no son opcionales, siempre y cuando suministre uno de ellos.

Para cargar y ejecutar la secuencia de comandos en check_required.js, añada el siguiente bloque después modernizr.adc.js se ha unido a la página (el código está en required_load.html):

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

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

Answer 3

¿Qué tal

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

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

Answer 4

Hay un problema con navegadores como el Android (versiones anteriores a la 4.4), que implementa checkValidity (y esta función, de hecho, comprueba las entradas), pero el navegador no proporciona ninguna información al usuario (y envía el formulario) si alguna entrada no es válida.

Sin embargo, puede verificar si hay algún problema al usar validationMessage. Esta propiedad muestra el mensaje de error que el navegador mostrará al usuario. Si checkValidity() es falso pero no hay validationMessage, el navegador no tiene soporte de validación de formulario html5 completo.

He hecho esta función.Se requiere como argumentos Todos los campos en la forma:

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

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

Answer 5

Las siguientes pruebas no funcionó para Safari:

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

y

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

Informan true cuando se esperaba false, ya que Safari no informa campos no válidos.

Sin embargo, esta prueba funciona:

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

(no probado en IE o Android)

EDIT: Safari hace validar, pero no informa, lo que explica las respuestas a estas pruebas. Los campos inválidos se pueden descubrir a través de la clase pseudo class CSS :invalid. Una combinación de estas pruebas se puede usar para validar dónde el navegador no es compatible con la validación e informar de dónde no se informa el navegador.