Funcion de valicadion de campos.... no regresa return!!!!

[Huacho12]

Buenos dias!!

A todos los Foreros!!!!

Estoy haciedno un sistema en el cual debo de validar varios campos de texto los cuales se encuentran dentro de un formulario (obio no!!).

La funcion que estoy haciendo es para hacer en un sentido una "validacion dinamica" y no tener que repetir la misma validacion para esos campos, esta funcion debe valir si estan o no en blanco y mandar un alert y posteriormente terminar el IF con return para que el usuario llene ese campo. Les dejo el codigo de la funcion:

//funcion para validar los campos sin tener que estar repitiendo el codigo

Código Javascript:

function valCampos(objeto,msg)
{
        if(objeto.value==""){ alert(msg); return objeto.focus(); }
}
 
function validaForm()
{
       //mando llamar la funcion
      valCampos(document.form1.texto1,"Llena el campo de XX1");
      valCampos(document.form1.texto2,"Llena el campo de XX2");
      valCampos(document.form1.texto3,"Llena el campo de XX3");
}
 

Segun yo al momento de validar el primer campo si este esta en blanco debe de mandar el mensaje y posicionarse en el campo con la focus(), pero no lo hace si no que se pasa de largo y valida los tres seguidamente.

la funcion validaForm() la mando a llamar desde mi boton que se encuentra en el formulario.

Código HTML:

<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="text" name="texto1" id="texto1" />
  </label>
  <label>
  <input type="text" name="texto2" id="texto2" />
  </label>
  <label>
  <input type="text" name="texto3" id="texto3" />
  </label>
  <p>
    <label>
    <input type="button" name="button" id="button" value="Botón" onclick="validaForm();" />
    </label>
  </p>
</form>
 

Espero haberme explicado bien!! y muchas gracias deantemano por la ayuda!!

Saludos

[jahepi]

Hola Huacho12 !

Estas regresando el valor de retorno del método focus, eso no cortaría el flujo a las posteriores llamadas a la función de validación, lo que se podría hacer es avisar en la función si fue válido o no y en base a eso continuar el flujo, pero tendrías que poner un condicional en cada llamada y si válida continuar y si no, cancelar la ejecución.

Para evitar todo ese llenadero de condicionales te propongo utilizar alguna variable booleana que si hay un error de validación indicarlo en la variable, a partir de eso podremos saber si seguir validando en las siguientes llamadas a la función valCampos.

Código javascript:

var error = false;
function valCampos(objeto, msg) {
    if(error) {
        return;
    }
    if(objeto.value == "") { 
        alert(msg); 
        objeto.focus(); 
        error = true; 
    }
}
function validaForm() {
    valCampos(document.form1.texto1, "Llena el campo de XX1");
    valCampos(document.form1.texto2, "Llena el campo de XX2");
    valCampos(document.form1.texto3, "Llena el campo de XX3");
    error = false;
}
 

Un saludo y suerte !

[Huacho12]

Hola!! jahepi

Muchas gracias.

Ya probe lo que comentaste y si funciono!!!!! !!!!!

Pero no entiendo....... bueno si entiendo que creas una variable (error) que tendra un valor true o false..... pero....

por que la inicialisas en false???? o es que con el false haces que continue el llamado a la funcion valCampos??

dentro de la funcion valCampos como definirias la validacion que haces de la variable error o javascript por defecto toma que la estas comparando con true??

Perdon por las preguntas................

De antemano te agradesco la ayuda y la explicacion .

Saludos

[alexg88]

También puedes hacer algo así, para no usar variables externas.

Tienes dos arrays:
El primero (inputs),guarda cada uno de los campos a verificar
El segundo (mensajes), guarda los mensajes que muestras si se produce error.

Luego realizas un bucle por el primer y vas llamando a la función valCampos con cada valor del array. La función valCampos devuelve true si se ha producido un error y false si no.

Por tanto, dentro del bucle compruebas si la llamada es true, y si es así sales de la función.

Código Javascript:

function valCampos(objeto,msg)
{
        if(objeto.value=="")
         {
            alert(msg);
            objeto.focus();
             return true;
         }
    return false;
}
 
function validaForm()
{
    
    var inputs = [document.form1.texto1,document.form1.texto2,document.form1.texto3];
    var mensajes = ["Llena el campo de XX1","Llena el campo de XX2","Llena el campo de XX3"];
    
    for(key in inputs){
     if (valCampos(inputs[key],mensajes[key]))
        return;
    }
}
 

[jahepi]

Hola Huacho12 !

La inicializo en falso para indicar que no ha habido algún error de validación, en cada llamada a la función reviso si la variable error es verdadera, así compruebo que ha habido un error y parar la ejecución de la función.

Si está en falso llegaría hasta el condicional y si el campo está vació mostraría la alerta y cambiaría la variable error a verdadero para indicar que encontró un error de validación así en las siguientes llamadas a la función valCampos como está en verdadero siempre se saldría de la función sin evaluar si el campo está vacío.

Un saludo y suerte !

[jahepi]

Ve la solución de alexg88 utilizando arreglos, es más elegante y no depende la función de variables de ámbito global, la ventaja, haces tu función reutilizable para otros proyectos.

Un saludo y suerte !

[Huacho12]

Hola jahepi y alexg88!!!!!!!!!!!

Gracias por la explicacion!!

Ok la funcion que menciona jahepi queda genial y no me opongo al uso de vectores como lo indica alexg88.

Ahora que veo con el formulario se me pide que se agregue un list/menu , y este segun yo se valida de una forma diferente a un txt, al final me queda asi:

Código Javascript:

var error = false;
function valCampos(objeto,msg)
{
     if(error){ return; }
     if(objeto.value==""){ alert(msg); objeto.focus(); error=true; }
    
}
 
function validaForm()
{
      var seleccionLista; 
      //mando llamar la funcion
      valCampos(document.form1.texto1,"Llena el campo de XX1");
      valCampos(document.form1.texto2,"Llena el campo de XX2");
      valCampos(document.form1.texto3,"Llena el campo de XX3");
      error=false;
 
      if(document.form1.lista1[document.form1.lista1.selectedIndex].value!="empty")
     {
          seleccionLista = document.form1.lista1[document.form1.lista1.selectedIndex].value;
     }else{ alert("seleccione una opcion de la lista"); return;}
}
 

Ahora ya me respeta la validacion de la txt pero al agregar la validacion del list/menu me manda seguido el mensaje del alert del lsit/menu, como le puedo hacer para que me respete de nuevo la validacion de los txt y no se salte luego luego a la del lsit/menu????

Y el formulario quedaria asi:

Código HTML:

<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="text" name="texto1" id="texto1" />
  </label>
  <label>
  <input type="text" name="texto2" id="texto2" />
  </label>
  <label>
  <input type="text" name="texto3" id="texto3" />
  </label>
  <p>
    <label>
    <select name="lista1" id="select">
    <option value="empty">Selecciona...</option>
    <option value="empty">opcion 1</option>
    <option value="empty">opcion 2</option>
    <option value="empty">opcion 3</option>
    </select>
    </label>
  </p>
  <p>
    <label>
    <input type="button" name="button" id="button" value="Botón" onclick="validaForm();" />
    </label>
  </p>
</form>
 

Muchas gracias por su ayuda!!!!!


Saludos