checkValidity para actualizar la interfaz de usuario

Question

Cuando intentamos enviar el formulario HTML5, impide el envío del formulario si uno o más campos obligatorios carecen del valor o se produce algún otro error (tipo o longitud no coincide). La interfaz de usuario se actualiza con campos inválidos resaltados y el primer campo no válido se enfoca. Además, hay un globo/burbuja adjunto al primer campo inválido con un mensaje de error.

Ahora, si es un formulario Ajax, llamamos a myForm.checkValidity() para confirmar los errores antes de enviar la llamada Ajax. Pero al llamar a checkValidity(), no afecta a la IU con campos no válidos resaltados y con burbuja adjunta.

¿Hay alguna manera de llamar al comportamiento nativo del navegador para su validación, para que podamos ver el globo junto con los campos no válidos resaltados y enfocados?

Answer 1

Simplemente activa un envío de formulario real - http://jsfiddle.net/tj_vantoll/ZN29S/.

Una presentación forma real se ejecutará checkValidity, mostrar los errores de la burbuja, llame invalid controladores de eventos según sea necesario, etc.

Para asegurarse de que la forma en realidad no presentar sólo hay que conectar un manejador de evento para submit el <form> que previene la acción predeterminada, luego realice la llamada AJAX.

Esto funciona porque el evento submit no se activará a menos que se haya cumplido un formulario con todas sus restricciones (es decir, tiene datos válidos). Por lo tanto, no es necesaria una llamada explícita al checkValidity.

Editar (11/7/12) a las direcciones de comentarios.

Por un envío de formulario real en este caso, simplemente me refería a un envío no AJAX hecho con un botón de enviar. Para que se muestre la burbuja nativa y el enfoque para cambiar al elemento de forma apropiado, esta es la única manera de lograr esto. Si no hay un botón de envío presente, puede crear uno oculto y usarlo para activar el envío; it will still work.

Estoy de acuerdo en que este enfoque es menos que ideal, pero funciona en all supporting browsers. La única razón por la que se utiliza este hack en lugar de llamar al form.submit() es porque form.submit() no activa la validación nativa. Para mí, el problema aquí no es que no haya una API para activar la validación, sino que no es necesario llamar a form.submit(). La especificación dice que constraint validation se debe ejecutar siempre que "el agente de usuario esté requerido para validar estáticamente las restricciones de la forma de elemento de formulario". No sé por qué llamar al form.submit() no se aplicaría.

Cabe señalar que checkValidity se ejecuta a través de la misma algorithm como un envío de formulario nativo. Por lo tanto, usted es libre de turn off the default bubbles e implementar la suya propia. Por ejemplo algo como this.