[SOLUCIONADO] Hacer que una validación continúe si todo va bien

[berkeleyPunk]

Buen día!


Supongamos que tenemos un formulario con dos campos, sexo y años.

La idea es que, después de validar sexo se validen los años.

Para validar lo 1ro empleo un for, y si se valida bien, pongo un return true. Pero hacer esto ya no sigue con la validación de lo 2do.

He aquí el código.

Ahora, si en vez de poner return true pongo un continue, sí se sigue con la validación de lo 2do, pero el for se repite innecesariamente.


¿Cómo le hacemos para que el for se pare ahí donde valide OK y, además, el script siga con la validación de los años?

Se me ocurre anidar todas las validaciones, algo así. Pero el código aumenta mucho y la verdad quisiera saber si se puede según la estructura del script tal como está ahora.



Saludos cordiales!

[treick]

prueba poniendo break debería romper el for

Código Javascript:

function validarCuestionario()
    {
        var genero  = document.getElementsByName("genero");
        var anios   = document.getElementById("anios");
 
 
        /*  VALIDA GÉNERO  */
 
        for ( i=0; i<genero.length; i++ )
        {
            if ( genero[0].checked )
            {
                alert("HOMBRE");
                break;
            }
            else if ( genero[1].checked )
            {
                alert("MUJER");
                break;
            }
            else
            {
                alert("Olvidaste seleccionar el GÉNERO");
                break;
            }
        }
 
 
 
        /*  VALIDA AÑOS */
 
        if ( anios.value == "" )
        {
            alert("¿Cuántos años tienes?");
        }
    }
 

nose si es lo que buscas.
un saludo

[Alexis88]

Yo te propongo hacerlo así:

Código Javascript:

var form = document.getElementsByTagName("form")[0],
    elementos = form.elements,
    total = elementos.length,
    radios = [],
    totalRadios = 0;
 
for (i = 0; i < total; i++)
    if (elementos[i].getAttribute("type") == "radio"){
        radios.push(elementos[i]);
        totalRadios++;
    }
 
form.addEventListener("submit", function(e){
    e.preventDefault();
    
    var comodin = 0;
    
    for (i = 0; i < totalRadios; i++)
        if (!radios[i].checked) comodin++;
    
    if (comodin == totalRadios)
        alert("Debe de seleccionar una opción");
    else
        for (i = 0; i < total; i++)
            switch (elementos[i].getAttribute("type")){
                case "text":
                    if (!elementos[i].value.length)
                        elementos[i].value = prompt("¿Cuántos años tienes?");
                    break;
                    
                case "radio":
                        if (elementos[i].checked)
                            alert(elementos[i].value);
                    break;
            }
}, false);
 

Inicialmente, defino en variables al formulario, sus elementos, el total de elementos, un array en el que incluiré a todos los radio buttons del formulario (más adelante) y una variable en la que acumularé el total de radio buttons. Enseguida, busco entre los elementos del formulario a todos los elementos de tipo "radio" y por cada coincidencia, añado el elemento actual al array que declaré previamente y sumo 1 a totalRadios.

Luego, cuando mande el formulario a procesarse (evento submit), cancelo dicho evento con el método preventDefault, declaro una variable comodín y busco entre los elementos del array radios, es decir, entre los radio buttons del formulario, a aquellos que no estén marcados. Por cada uno que no lo esté, aumento en uno el valor de comodin.

Seguidamente, comparo al valor final de comodin con el total de radio buttons en el formulario. Si son iguales, es decir, si no se marcó un solo radio button, lanzo un mensaje de alerta en el que le digo al usuario que debe marcar uno, caso contrario, recorro a los elementos del formulario y según el tipo de elemento que sean, realizo determinadas acciones. Si es una caja de texto (type = "text"), verifico si se ha insertado contenido en ella, de no ser así, obligo al usuario a ingresar el dato faltante a través de una caja de diálogo. Si es un radio button (type = "radio") y está marcado, muestro en un mensaje de alerta el valor del mismo.

DEMO

Eventualmente, puedes hacer crecer este algoritmo de validación.

Saludos

[berkeleyPunk]

Gracias por responder treick y maestro Alexis88.

Antes que otra cosa, ¡caray, cómo quisiera uno que el foro de Prestashop fuera tan popular como el de Javascript o PHP!

Pero, ni modo!

Es cierto, treick, quién sabe cómo se me fue a olvidar el break! Bien hecho. Por otro lado, Alexis88, sin duda que se puede extraer valiosa información de la completa reestructuración del código que aportas!

Perfecto.

Saludos y hasta luego!