Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Validar formulario on Submit

Estas en el tema de Validar formulario on Submit en el foro de Frameworks JS en Foros del Web. Hola, he estado buscando como validar todas las funciones que he hecho también en el evento "onSubmit", pero lo que he encontrado son explicaciones que ...
  #1 (permalink)  
Antiguo 04/09/2012, 03:56
 
Fecha de Ingreso: enero-2012
Ubicación: En españa dije...
Mensajes: 28
Antigüedad: 12 años, 9 meses
Puntos: 1
Validar formulario on Submit

Hola, he estado buscando como validar todas las funciones que he hecho también en el evento "onSubmit", pero lo que he encontrado son explicaciones que no se adaptar a mi código. Soy un poco nuevo en esto de js, a ver si pudiera ayudarme alguien.

Gracias de antemano.

Pondré dos funciones de js que hago para que compruebe los campos cuando pierde el foco.

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.    
  3.     //Username Check
  4.     $("#username").change(function() {
  5.  
  6.     var usr = $("#username").val();
  7.  
  8.     if(usr.length >= 4)
  9.     {
  10.     $("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
  11.  
  12.         $.ajax({  
  13.         type: "POST",  
  14.         url: "check.php",  
  15.         data: "username="+ usr,  
  16.         success: function(msg){  
  17.        
  18.        $("#status").ajaxComplete(function(event, request, settings){
  19.  
  20.         if(msg == 'OK')
  21.         {
  22.             $("#username").removeClass('object_error'); // if necessary
  23.             $("#username").addClass("object_ok");
  24.             $(this).html('&nbsp;<img src="tick.ico" align="absmiddle">');
  25.         }  
  26.         else  
  27.         {  
  28.             $("#username").removeClass('object_ok'); // if necessary
  29.             $("#username").addClass("object_error");
  30.             $(this).html(msg);
  31.         }  
  32.        
  33.        });
  34.  
  35.      }
  36.        
  37.       });
  38.  
  39.     }else{
  40.         $("#status").html('<font color="red"><br /><center>The username should have at least <strong>4</strong> characters.</center></font>');
  41.         $("#username").removeClass('object_ok'); // if necessary
  42.         $("#username").addClass("object_error");
  43.     }
  44.  
  45.     });
  46.  
  47.     //Password Check
  48.     $("#password").change(function() {
  49.  
  50.         var pass = $("#password").val();
  51.         var pass_error = 1;
  52.        
  53.         if(pass.length >= 6){
  54.             $("#status2").html('&nbsp;<img src="tick.ico" align="absmiddle">');
  55.         }else{
  56.             $("#status2").html('<font color="red"><br /><center>The password should have at least <strong>6</strong> characters.</center></font>');
  57.             $("#password").removeClass('object_ok'); // if necessary
  58.             $("#password").addClass("object_error");
  59.         }
  60.        
  61.     });
  62. });

¿Cómo haría ahora para comprobar las dos en el evento submit del formulario?

Gracias de antemano.
  #2 (permalink)  
Antiguo 04/09/2012, 12:50
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 16 años, 3 meses
Puntos: 1532
Respuesta: Validar formulario on Submit

idente el código adecuadamente, para poder verificar que instrucciones están embebidas en que eventos, lo que parece es que todo se resume a que el evento change de #username valida todo, además de hacer una petición por ajax.

separe primero cada fragmento validable y anidelo dentro de un solo bloque de función, para posteriormente añadirlo al evento onsubmit
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 08/09/2012, 05:18
 
Fecha de Ingreso: enero-2012
Ubicación: En españa dije...
Mensajes: 28
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: Validar formulario on Submit

Bien, ya he arreglado la validación on submit. El problema es que ahora, cuando lo escribo todo correctamente, no me salta ningún error, pero tampoco va a la acción determinada del formulario para insertar los datos en la base de datos.

Al final del todo hago la comprobación on submit.

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.    
  3.     //Variables globales
  4.     var usr = $("#username");
  5.     var pass = $("#password");
  6.     var cpass = $("#confirm_password");
  7.     var email = $("#email");
  8.  
  9.     //Username Check
  10.     function validateUsername(){
  11.  
  12.         usr = $("#username").val();
  13.         if(usr.length >= 4)
  14.         {
  15.         $("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
  16.  
  17.             $.ajax({  
  18.             type: "POST",  
  19.             url: "check.php",  
  20.             data: "username="+ usr,  
  21.             success: function(msg){  
  22.            
  23.            $("#status").ajaxComplete(function(event, request, settings){
  24.  
  25.             if(msg == 'OK')
  26.             {
  27.                 $("#username").removeClass('object_error'); // if necessary
  28.                 $("#username").addClass("object_ok");
  29.                 $(this).html('&nbsp;<img src="tick.ico" align="absmiddle">');
  30.                 return true;
  31.             }  
  32.             else  
  33.             {  
  34.                 $("#username").removeClass('object_ok'); // if necessary
  35.                 $("#username").addClass("object_error");
  36.                 $(this).html(msg);
  37.                 return false;
  38.             }  
  39.            
  40.            });
  41.  
  42.          }
  43.            
  44.           });
  45.  
  46.         }else{
  47.             $("#status").html('<font color="red"><br /><center>The username should have at least <strong>4</strong> characters.</center></font>');
  48.             $("#username").removeClass('object_ok'); // if necessary
  49.             $("#username").addClass("object_error");
  50.             return false;
  51.         }
  52.  
  53.     }
  54.    
  55.     //Password check
  56.     function validatePassword() {
  57.  
  58.         pass = $("#password").val();
  59.        
  60.         if(pass.length >= 6){
  61.             $("#status2").html('&nbsp;<img src="tick.ico" align="absmiddle">');
  62.             return true;
  63.         }else{
  64.             $("#status2").html('<font color="red"><br /><center>The password should have at least <strong>6</strong> characters.</center></font>');
  65.             $("#password").removeClass('object_ok'); // if necessary
  66.             $("#password").addClass("object_error");
  67.             return false;
  68.         }
  69.        
  70.     }
  71.    
  72.     //Password confimation check
  73.     function validatePassword2() {
  74.  
  75.         cpass = $("#confirm_password").val();
  76.         var pass = $("#password").val();
  77.         if(cpass == pass){
  78.             if(cpass.length >= 6){
  79.                 $("#status3").html('&nbsp;<img src="tick.ico" align="absmiddle">');
  80.                 return true;
  81.             }else{
  82.                 $("#status3").html('<font color="red"><br /><center>The password must have at least <strong>6</strong> characters!</center></font>');
  83.                 $("#confirm_password").removeClass('object_ok'); // if necessary
  84.                 $("#confirm_password").addClass("object_error");
  85.                 return false;
  86.             }
  87.         }else{
  88.             $("#status3").html('<font color="red"><br /><center>The passwords<strong> doesn`t match!</center></strong></font>');
  89.             $("#confirm_password").removeClass('object_ok'); // if necessary
  90.             $("#confirm_password").addClass("object_error");
  91.             return false;
  92.         }
  93.        
  94.     }
  95.    
  96.     function validateEmail() {
  97.  
  98.         email = $("#email").val();
  99.         var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  100.        
  101.         if(email.match(mailformat)){
  102.             $("#status4").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
  103.  
  104.             $.ajax({  
  105.                 type: "POST",  
  106.                 url: "checkmail.php",  
  107.                 data: "email="+ email,  
  108.                 success: function(msg){  
  109.                
  110.                    $("#status4").ajaxComplete(function(event, request, settings){
  111.  
  112.                         if(msg == 'OK')
  113.                         {
  114.                             $("#email").removeClass('object_error'); // if necessary
  115.                             $("#email").addClass("object_ok");
  116.                             $(this).html('&nbsp;<img src="tick.ico" align="absmiddle">');
  117.                             return true;
  118.                         }  
  119.                         else  
  120.                         {  
  121.                             $("#email").removeClass('object_ok'); // if necessary
  122.                             $("#email").addClass("object_error");
  123.                             $(this).html(msg);
  124.                             return false;
  125.                         }  
  126.                    
  127.                     });
  128.                 }
  129.             });
  130.         }else{
  131.             $("#status4").html('<font color="red"><br /><center>The email <strong>is invalid!</center></strong></font>');
  132.             $("#email").removeClass('object_ok'); // if necessary
  133.             $("#email").addClass("object_error");
  134.             return false;
  135.         }
  136.        
  137.     }
  138.    
  139.     //Validate checkbox
  140.     function validateCheck() {
  141.    
  142.         if(document.form.agree.checked == true){
  143.             $("#status7").html('');
  144.             $("#agree").removeClass('object_error'); // if necessary
  145.             $("#agree").addClass("object_ok");
  146.             return true;
  147.         }else{
  148.             $("#status7").html('<font color="red">You must accept the<strong> agreement!</strong></font>');
  149.             $("#agree").removeClass('object_ok'); // if necessary
  150.             $("#agree").addClass("object_error");
  151.             return false;
  152.            
  153.         }
  154.     }
  155.    
  156.     //Validation on blur.
  157.     usr.blur(validateUsername);
  158.     pass.blur(validatePassword);
  159.     cpass.blur(validatePassword2);
  160.     email.blur(validateEmail);
  161.    
  162.     //Validation on submit.
  163.     // Envio de formulario  
  164.     $("#signupForm").submit(function(){  
  165.         if(validateUsername() & validatePassword() & validatePassword2() & validateEmail() & validateCheck()){
  166.             return true;
  167.         }
  168.         else{
  169.             alert("adios");
  170.             return false;
  171.         }
  172.     });
  173.    
  174. });

¿Está bien así?

EDITO: Me he dado cuenta, de que siempre devuelve "false", aunque todo este correcto en el formulario. ¿Por qué podría ser?

Última edición por mandibula120; 08/09/2012 a las 05:52
  #4 (permalink)  
Antiguo 08/09/2012, 17:51
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 16 años, 3 meses
Puntos: 1532
Respuesta: Validar formulario on Submit

Porque en realidad válida cada operación en el servidor con una petición AJAX, el cual es asíncrono y siempre devolverá false, a no ser que utilicé los callbacks en cadena del onreadystatechange cómo debe ser.

Lo ideal es hacer una sola petición AJAX ya que sí al final todo se válida en el servidor es inútil validar cada pedazo, pasarlo a JavaScript y volverlo a enviar , esta haciendo uso de las malas prácticas y abuso de AJAX, no tiene sentido validar en JavaScript sí realmente en JavaScript usted no válida, sólo malgasta el ancho de banda con tantas peticiones AJAX.
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #5 (permalink)  
Antiguo 09/09/2012, 02:58
 
Fecha de Ingreso: enero-2012
Ubicación: En españa dije...
Mensajes: 28
Antigüedad: 12 años, 9 meses
Puntos: 1
Respuesta: Validar formulario on Submit

He estado leyendo sobre "onreadystatechange", pero no sé mucho sobre esto y me cuesta mucho entenderlo.

¿Podrías explicarmelo con un ejemplo aplicado a un formulario?, si fuera posible claro, jeje.

Etiquetas: ajax, formulario, funcion, html, js, php, submit
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:20.