Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: gpinyol10 en 6 Abril 2016, 10:57 am



Título: Validación formulario Ajax
Publicado por: gpinyol10 en 6 Abril 2016, 10:57 am
Hola, estoy haciendo una validación de formulario con Ajax y PHP pero no me funciona.

Yo tengo la siguiente función que la llamo en el formulario con onSubmit. El problema lo tengo que me llega antes al return false del final del todo cuadno aún no ha hecho la petición del ajax, entonces si la petición està correcta, como ya ha mandado false, no me manda el formulario. Pero las comprobaciones en el archivo php estan correctas y me devuelve bien, el problema es que la función validaForm devuelve false antes de esperarse a la respuesta del servidor.
Cómo puedo arreglarlo? Gracias

Código:
function validaForm(){
$('#Info1').html('<div style="display:none" class="Error"></div>');
$('#Info2').html('<div style="display:none" class="Error"></div>');
$('#Info3').html('<div style="display:none" class="Error"></div>');
$('#Info4').html('<div style="display:none" class="Error"></div>');
$('#Info5').html('<div style="display:none" class="Error"></div>');
$('#Info6').html('<div style="display:none" class="Error"></div>');
$('#Info7').html('<div style="display:none" class="Error"></div>');

var seleccion=($('input:radio[name=hayFide]:checked').val());
if (seleccion=='Tengo Fide Id') {
if($("#fide_id").val() == ""){
$('#Info1').html('<div class="Error">Campo obligatorio</div>');
$("#fide_id").focus();
return false;
} else if (isNaN($("#fide_id").val())){
$('#Info1').html('<div class="Error">Tiene que ser un valor numérico</div>');
$("#fide_id").focus();
return false;
} else {
var fide_id = $("#fide_id").val(); 
var dataString = 'fide_id='+fide_id+'&idioma='+language;
$.ajax({
type: "GET",
url: "../wp-content/themes/Divi/comprobarFormulario.php",
data: dataString,
success: function(data) {
$('#Info1').fadeIn(1000).html(data);
if (data=="") {
if (comprobar()) {
return true;
}
} else {
$("#fide_id").focus();
return false;
}
}
});
}
} else {
if (comprobar()) {
return true;
}
}

return false;
}


Título: Re: Validación formulario Ajax
Publicado por: Gallu en 11 Abril 2016, 17:08 pm
Primero que nada intenta explicar mejor el problema ya que tu explicación no es muy clara.

Entiendo que lo que sucede es que en el onSubmit llamas a validarForm y que siempre te devuelve false. yo lo que haría es hacer el submit dependiente de la respuesta del ajax de comprobarFormulario.

Me gustaría saber qué hace el método comprobar

Fíjate en las modificaciones que agrego a continuación

Código
  1. function validaForm(){
  2. $('#Info1').html('<div style="display:none" class="Error"></div>');
  3. $('#Info2').html('<div style="display:none" class="Error"></div>');
  4. $('#Info3').html('<div style="display:none" class="Error"></div>');
  5. $('#Info4').html('<div style="display:none" class="Error"></div>');
  6. $('#Info5').html('<div style="display:none" class="Error"></div>');
  7. $('#Info6').html('<div style="display:none" class="Error"></div>');
  8. $('#Info7').html('<div style="display:none" class="Error"></div>');
  9.  
  10. var seleccion=($('input:radio[name=hayFide]:checked').val());
  11.  
  12. if (seleccion=='Tengo Fide Id') {
  13.  if($("#fide_id").val() == ""){
  14.   $('#Info1').html('<div class="Error">Campo obligatorio</div>');
  15.   $("#fide_id").focus();
  16.   return ;
  17.  } else if (isNaN($("#fide_id").val())){
  18.   $('#Info1').html('<div class="Error">Tiene que ser un valor numérico</div>');
  19.   $("#fide_id").focus();
  20.   return ;
  21.  } else {
  22.   var fide_id = $("#fide_id").val();  
  23.   var dataString = 'fide_id='+fide_id+'&idioma='+language;
  24.   $.ajax({
  25. type: "GET",
  26. url: "../wp-content/themes/Divi/comprobarFormulario.php",
  27. data: dataString,
  28. success: function(data) {      
  29. $('#Info1').fadeIn(1000).html(data);
  30. if (data=="") {
  31.  if (comprobar()) {
  32. //como el formulario ha pasado todas las validaciones lo doy por bueno, hacemos el submit del formulario
  33. document.getElementById('tuForm').submit();
  34.  }
  35. } else {
  36.  $("#fide_id").focus();
  37.  return ;
  38. }      
  39. }    
  40.   });      
  41.  }
  42. } else {
  43.  if (comprobar()) {
  44. //entiendo que si vamos por este else y comprobar devuelve true podemos hacer submit
  45. document.getElementById('tuForm').submit();
  46.  }
  47. }
  48.  
  49. }
  50.