¿Cómo mostrar programáticamente las burbujas de error de validación del lado del cliente de HTML5?

Question

Estoy tratando de usar la validación HTML5 del lado del cliente fuera de un contexto de formulario/envío, pero no puedo ver cómo mostrar las burbujas de error de validación. Considere lo siguiente:

<input type="text" id="input" pattern="[0-9]" required oninvalid="alert('yes, invalid')"> 
<button onclick="alert(document.getElementById('input').checkValidity())">Check</button> 

Todo funciona como se esperaba, con el valor correcto de ser devuelto a checkValidity, y el evento no válido se envía y se muestra, pero ¿cómo puedo mostrar mediante programación la burbuja de error de validación?

Answer 1

Si estamos hablando de esta burbuja: comentario

Sede de ScottR a esta respuesta en su lugar.

... entonces mi prueba muestra que tanto Firefox y Chrome muestran que cuando se llama a checkValidity en un elemento envuelto en una forma <> ( testcase), pero no en un elemento independiente ( testcase).

No parece ser un mecanismo para mostrarlo cuando no hay forma, y ​​la especificación doesn't even say tiene que ser visualizado en respuesta a programáticas checkValidity llamadas (en el elemento o formulario) - sólo cuando la presentación de una formar.

Así que por ahora, envuelva sus elementos en un formulario, incluso si realmente no lo va a enviar.

Mejor aún, utilice su propia IU de validación, esto lo protegerá de futuros cambios en los navegadores en este área no especificada.

Answer 2

Intente utilizar required="required" y deshacerse del controlador oninvalid a menos que realmente lo necesite.

http://blog.mozilla.com/webdev/2011/03/14/html5-form-validation-on-sumo/

Ejemplo de este trabajo: https://support.mozilla.com/en-US/users/register

Answer 3

Simplemente configure manualmente el atributo "no válido" en los campos incorrectos. pequeño ejemplo:

var form = $('#myForm').get(0); 
if(typeof formItem.checkValidity != 'undefined' && !formItem.checkValidity()) { 
    $('input:required').each(function(cnt, item) { 
     if(!$(item).val()) { 
      $(item).attr('invalid', 'invalid'); 
     } 
    }); 
    return false; 
}