Validación de formulario de jQuery antes de la presentación de Ajax

Bit de JavaScript:

$(document).ready(function() { $('#form').submit(function(e) { e.preventDefault(); var $form = $(this); // check if the input is valid if(! $form.valid()) return false; $.ajax( { type:'POST', url:'add.php', data:$('#form').serialize(), success:function(response) { $("#answers").html(response); } }); }) }); 

Bit de HTML:

    

Este es el código que trato de usar. La idea es hacer que todas mis entradas sean validadas antes de enviar mi formulario con Ajax. He intentado numerosas versiones de esto ahora, pero cada vez que termino enviando aunque el formulario no está completamente lleno. Todas mis entradas son de la clase “requerida”. ¿Alguien puede ver lo que estoy haciendo mal?

Además, dependo de los requisitos basados ​​en la clase ya que mis nombres de entrada se generan con php, por lo que nunca puedo estar seguro de qué nombre [id] o tipos de entrada obtengo.

Muestro / escondo preguntas a medida que avanzo en “páginas”.

  

JS:

 function toggleVisibility(newSection) { $(".section").not("#" + newSection).hide(); $("#" + newSection).show(); } 

Puede usar la opción submitHandler . Básicamente ponga la llamada $.ajax dentro de este manejador, es decir, inviértala con la lógica de configuración de validación.

 $('#form').validate({ ... your validation rules come here, submitHandler: function(form) { $.ajax({ url: form.action, type: form.method, data: $(form).serialize(), success: function(response) { $('#answers').html(response); } }); } }); 

El complemento jQuery.validate invocará el controlador de envío si la validación ha pasado.

primero, no es necesario que agregue explícitamente las classRules ya required el plugin jquery.validate detecta automáticamente las requeridas. para que pueda usar este código:

  1. en el envío del formulario, evita el comportamiento predeterminado
  2. si el formulario es Inválido, detenga la ejecución.
  3. de lo contrario, si es válido, envíe la solicitud ajax.

     $('#form').submit( function(e){ e.preventDefault(); var $form = $(this); // check if the input is valid if(! $form.valid()) return false; $.ajax({ type: 'POST', url: 'add.php', data: $('#form').serialize(), success: function(response) { $("#answers").html(response); } }); }); 

Puedes intentar hacer:

 if($("#form").validate()) { return true; } else { return false; } 

Este ejemplo específico solo comprobará las entradas, pero podría modificarlo sin embargo, agregue algo como esto a su función .ajax:

 beforeSend: function() { $empty = $('form#yourForm').find("input").filter(function() { return this.value === ""; }); if($empty.length) { alert('You must fill out all fields in order to submit a change'); return false; }else{ return true; }; }, 

Creo que primero validaré el formulario y si la validación pasará, entonces haré una publicación de jajax. No te olvides de agregar “return false” al final del script.

Creo que submitHandler con validación jquery es una buena solución. Por favor, obtenga una idea de este código. Inspirado en @Darin Dimitrov

 $('.calculate').validate({ submitHandler: function(form) { $.ajax({ url: 'response.php', type: 'POST', data: $(form).serialize(), success: function(response) { $('#'+form.id+' .ht-response-data').html(response); } }); } }); 
 > Required JS for jquery form validation > ## jquery-1.7.1.min.js ## > ## jquery.validate.min.js ## > ## jquery.form.js ## $("form#data").validate({ rules: { first: { required: true, }, middle: { required: true, }, image: { required: true, }, }, messages: { first: { required: "Please enter first", }, middle: { required: "Please enter middle", }, image: { required: "Please Select logo", }, }, submitHandler: function(form) { var formData = new FormData($("#image")[0]); $(form).ajaxSubmit({ url:"action.php", type:"post", success: function(data,status){ alert(data); } }); } }); 
 function validateForm() { var a=document.forms["Form"]["firstname"].value; var b=document.forms["Form"]["midname"].value; var c=document.forms["Form"]["lastname"].value; var d=document.forms["Form"]["tribe"].value; if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="") { alert("Please Fill All Required Field"); return false; } else{ $.ajax({ type: 'post', url: 'add.php', data: $('form').serialize(), success: function () { alert('Patient added'); document.getElementById("form").reset(); } }); } } $(function () { $('form').on('submit', function (e) { e.preventDefault(); validateForm(); }); }); 

checkValidity función checkValidity JavaScript checkValidity es más que suficiente para activar la validación HTML5

 $(document).ready(function() { $('#urlSubmit').click(function() { if($('#urlForm')[0].checkValidity()) { alert("form submitting"); } }); });