A un nivel muy alto esto es lo que sucede
Este código funciona bien...
<div id='showme'></div> <div id='theform'> <form ...> <input required ... <input required ... <input id='thebutton' type='submit' .... </form> </div>El código anterior funciona bien. Si hago clic en enviar y el campo del formulario está vacío, recibo la notificación estándar.
Tira esto y funciona parcialmente...
$(document).ready(function(){ $('#thebutton').click(function() { $('#theform').hide(); $('#showme').html('<img src="loading2.gif">'); }); . . .Y la imagen se muestra como yo quiero. Sin embargo, pierdo todas las comprobaciones de los campos obligatorios.
¿Alguien puede ayudar con esto? Todo lo que quiero hacer es mostrar un gif animado de carga cuando el usuario haga clic en el botón Enviar.
Gracias
JT
Eso es porque está ocultando el formulario sin importar qué haga clic y luego colocando el gif del cargador. sería mejor vincularse al evento de envío del formulario, verificar la validación con javascript para ver si el formulario es válido y solo luego proceder a mostrar el estado de carga. Usando la validación nativa de HTML5 js, puede preguntarle a un elemento de entrada si es válido con el método checkValidity() como este.
if(requiredField.checkValidity() === false) //required field was not valid so you can't show loading gif yetCreo que esto lo hace. ¿Alguno de ustedes, gurús, podría confirmarlo?
$('#thebutton').click(function(e) { var isvalidate = $('#contentform')[0].checkValidity(); if (isvalidate) { event.preventDefault(); $('#theform').hide(); $('#showme').html('<img src="loading2.gif" alt="Loading" style="width:300px;">'); $('#contentform').submit(); } });¿O estoy haciendo algo mal?