Validación de HTML5 antes de enviar ajax

Esto debería ser simple, sin embargo, me está volviendo loco. Tengo un formulario html5 que estoy enviando con ajax. Si ingresa un valor no válido, hay una respuesta emergente que así lo indica. ¿Cómo puedo verificar que las entradas sean válidas antes de ejecutar my ajax submit?

formar:

enviar:

 $('#submit').click(function(){ var name = $("input#name").val(); var subject = $("input#subject").val(); var email = $("input#email").val(); var message = $("input#message").val(); var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; $.ajax({ url: "scripts/mail.php", type: 'POST', data: dataString, success: function(msg){ disablePopupContact(); $("#popupMessageSent").css("visibility", "visible"); }, error: function() { alert("Bad submit"); } }); }); 

De forma predeterminada, jQuery no sabe nada sobre la validación de HTML5, por lo que tendría que hacer algo como:

 $('#submit').click(function(){ if($("form")[0].checkValidity()) { //your form execution code }else console.log("invalid form"); }); 

Si se vincula al evento submit en lugar de hacer clic, solo se activará si pasa la validación HTML5.

Lo mejor es guardar en caché los selectores de jQuery en variables si lo usa varias veces para que no tenga que navegar el DOM cada vez que acceda a un elemento. jQuery también proporciona una función .serialize () que manejará el análisis de datos de formulario para usted.

 var $contactForm = $('#contactForm'); $contactForm.on('submit', function(ev){ ev.preventDefault(); $.ajax({ url: "scripts/mail.php", type: 'POST', data: $contactForm.serialize(), success: function(msg){ disablePopupContact(); $("#popupMessageSent").css("visibility", "visible"); }, error: function() { alert("Bad submit"); } }); }); 

Si usa la validación de formulario HTML5, deberá enviar la solicitud ajax en el controlador de envío del formulario. El controlador de envío solo se activará si el formulario valida. Lo que está usando es un controlador de clic de botón que siempre se activará porque no tiene asociación con la validación de formulario. NOTA: no todos los navegadores admiten la validación de formularios html5.

Prefiero usar el controlador de envío de jQuery, de todos modos recibirá la respuesta a su formulario con el siguiente método.

 jQuery('#contactForm').on('submit', function (e) { if (document.getElementById("contactForm").checkValidity()) { e.preventDefault(); jQuery.ajax({ url: '/some/url', method: 'POST', data: jQuery('#contactForm').serialize(), success: function (response) { //do stuff with response } }) } return true; }); 

No estoy seguro de lo que quieres decir. Pero supongo que quieres verificar en tiempo real si la entrada es válida. Si es así, debe usar .keyup en lugar de .click event, porque esto llevaría a una acción si el usuario presiona submit. Mira http://api.jquery.com/keyup/

Con esto, puede verificar la entrada con cada nueva inserción de caracteres y mostrar, por ejemplo, “no válido” hasta que su validación sea verdadera.

¡Espero que esto responda tu pregunta!

U también puede usar el método de validación de jquery para validar formularios como

$ (“# form id”). validate ();

que devuelve un valor booleano basado en la validación de formularios y también puede ver el error en el registro utilizando el método errorList.

Para utilizar la funcionalidad anterior, debe incluir el archivo jquery.validate.js en su script