Tema: Error para enviar form ajax
Ver Mensaje Individual
  #15 (permalink)  
Antiguo 26/09/2011, 02:32
alexg88
 
Fecha de Ingreso: abril-2011
Mensajes: 1.342
Antigüedad: 13 años, 7 meses
Puntos: 344
Respuesta: Error para enviar form ajax
Además de ciertos errores como no cerrar bien las llaves, la función validarFormulario tiene que estar fuera del $(document).ready o te dirá que no está declarada.

Pon el código tal cual te lo pongo dentro del <head>.

Código Javascript: 
Ver original
  1. function validarFormulario(){
  2.     var valido= true;
  3.     
  4.     // Valido el nombre
  5.     if ($('#nombre').val()==0){
  6.          valido= false;
  7.          jQuery("#errorNombre").show().css({'color':'red'}); 
  8.     }else{ 
  9.          jQuery("#errorNombre").hide(300); 
  10.     }
  11.     
  12.     // Valido el apellido
  13.     if ($('input#apellido').val()==0){
  14.          valido= false;
  15.          $("span#errorApellido").show().css({'color':'red'}); 
  16.     }else{
  17.          $("span#errorApellido").hide(300);
  18.     }
  19.     
  20.     // Valido el email
  21.     if ($('input#email').val()==""){ 
  22.          valido= false; 
  23.          $("#errorEmail").show().css({'color':'red'});
  24.     }else{
  25.  var expreg = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,3}/ 
  26.     if (!expreg.test($('#email').val())) { 
  27.           valido= false;
  28.          $("#errorEmail").show().css({'color':'red'}); 
  29.     }else{
  30.          $("#errorEmail").hide(300);
  31.     }
  32.     }
  33.     return valido;
  34.     }
  35.  
  36. $('#formusuario').ready(function(){  
  37.     
  38.  
  39.     $('#formusuario').submit(function() {
  40.     // Enviamos el formulario usando AJAX
  41.         $.ajax({
  42.             type: 'POST',
  43.             url: $(this).attr('action'),
  44.             data: $(this).serialize(),
  45.     // Mostramos un mensaje con la respuesta de PHP
  46.             success: function(data) { 
  47.                 $('#resultado').html(data);
  48.             }
  49.         })        
  50.         return false;
  51.     });    
  52.     
  53.     });

Así debería funcionarte sin ningún problema.

Aun así, se puede hacer de otro manera, a mi parecer mejor (no mezclas el html y el javascript).

Código Javascript: 
Ver original
  1. function validarFormulario(){
  2.     var valido= true;
  3.     
  4.     // Valido el nombre
  5.     if ($('#nombre').val()==0){
  6.          valido= false;
  7.          jQuery("#errorNombre").show().css({'color':'red'}); 
  8.     }else{ 
  9.          jQuery("#errorNombre").hide(300); 
  10.     }
  11.     
  12.     // Valido el apellido
  13.     if ($('input#apellido').val()==0){
  14.          valido= false;
  15.          $("span#errorApellido").show().css({'color':'red'}); 
  16.     }else{
  17.          $("span#errorApellido").hide(300);
  18.     }
  19.     
  20.     // Valido el email
  21.     if ($('input#email').val()==""){ 
  22.          valido= false; 
  23.          $("#errorEmail").show().css({'color':'red'});
  24.     }else{
  25.  var expreg = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,3}/ 
  26.     if (!expreg.test($('#email').val())) { 
  27.           valido= false;
  28.          $("#errorEmail").show().css({'color':'red'}); 
  29.     }else{
  30.          $("#errorEmail").hide(300);
  31.     }
  32.     }
  33.     return valido;
  34.     }
  35.  
  36. $('#formusuario').ready(function(){  
  37.     
  38.  
  39.     $('#formusuario').submit(function() {
  40.         
  41.         if (validarFormulario()){
  42.             
  43.     // Enviamos el formulario usando AJAX
  44.         $.ajax({
  45.             type: 'POST',
  46.             url: $(this).attr('action'),
  47.             data: $(this).serialize(),
  48.     // Mostramos un mensaje con la respuesta de PHP
  49.             success: function(data) { 
  50.                 $('#resultado').html(data);
  51.             }
  52.         })      
  53.         }  
  54.         return false;
  55.     });    
  56.     
  57.     });

Y le quitas el onSubmit en el formulario:

Código HTML: 
Ver original
  1. <form name="formularioUsuario"
  2. id="formusuario" action="procesar.php" method="POST">
  3.      
  4.     <table>
  5.     <thead></thead>
  6.                      <tbody>                    
  7.                         <tr>
  8.     <td>Nombre</td>
  9.     <td>
  10.     <input type="text" name="nombre" id="nombre" value="" />
  11.                              </td>
  12.                              <td>    
  13.     <span id="errorNombre" style="display:none;" >
  14.          Campo requerido
  15.     </span>
  16.                         </td>
  17.                         </tr>    
  18.                         <tr>
  19.     <td>Apellido</td>
  20.     <td>
  21.     <input type="text" name="apellido" id="apellido" value="" />
  22.                              </td>
  23.                              <td>
  24.     <span id="errorApellido" style="display:none;" >
  25.          Campo requerido
  26.     </span>
  27.                              </td>
  28.                         </tr>    
  29.                         <tr>
  30.     <td>e-Mail</td>
  31.     <td>
  32.     <input type="text" name="email" id="email" value="" />
  33.                              </td>
  34.                              <td>
  35.     <span id="errorEmail" style="display:none;" >
  36.          Campo requerido y debe estar correctamente escrito
  37.     </span>
  38.                              </td>
  39.                         </tr>    
  40.                         <tr>
  41.                              <td colspan="2">
  42.     <input type="submit" name="guardar" value="Guardar" />                                             
  43.                                  
  44.     <input type="button" name="cancelar" value="Cancelar" 
  45.     onclick="document.location.href = document.referrer" />
  46.                              </td>
  47.                         </tr>                        
  48.                      </tbody>    
  49.                  </table>
  50.                  <div id="resultado"></div>

Saludos