validar checkboxes

leo_25 · #1 (**permalink**) 15/10/2007, 12:13

tengo los siguientes checkboxes y nesecito validar con java script que al menos sea seleccionado al menos un rubro y al menos un subrubro de este . Agradesco su ayuda.
HTML]
<ul>
<input type='checkbox' name='rubros[1]' value='<?=1?>'>Alimentos<ul>
<li><input type='checkbox' name='subrubros[1][2]' value='<?=2?>'>Frutas<ul></li>
<li><input type='checkbox' name='subrubros[1][3]' value='<?=3?>'>Verduras<ul></li>
</ul>
<ul>
<input type='checkbox' name='rubros[1]' value='<?=1?>'>Prendas de vestir<ul>
<li><input type='checkbox' name='subrubros[1][2]' value='<?=2?>'>Vestidos<ul></li>
<li><input type='checkbox' name='subrubros[1][3]' value='<?=3?>'>Camisas<ul></li>
</ul>
[/HTML]

derkenuke · #2 (**permalink**) 15/10/2007, 16:44

Hola:

Lo primero ten mucho cuidado al construir tu documento (x)HTML, veo errores muy gordos ahí. Si empezamos de esa base, todo funcionará mal.

Ésta sería mi solucion. Un poquito de DOM para navegar por los nodos, y fácil fácil:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>
<style type="text/css">

</style>
</head>

<body>

<form onsubmit="return valida(this)" action="">
    <input type='checkbox' name='rubros[1]' value='x' />Alimentos
    <ul id="uno">
        <li><input type='checkbox' name='subrubros[1][2]' value='a' />Frutas</li>
        <li><input type='checkbox' name='subrubros[1][3]' value='b' />Verduras</li>
    </ul>
    <input type='checkbox' name='rubros[1]' value='x' />Prendas de vestir
    <ul id="dos">
        <li><input type='checkbox' name='subrubros[1][2]' value='a' />Vestidos</li>
        <li><input type='checkbox' name='subrubros[1][3]' value='b' />Camisas</li>
    </ul>
    <button type="submit">Envia</button>
</form>


<script type="text/javascript">
<!--


function valida(fr) {
    // Buscamos todos los elementos que se llamen subrubros[1]
    var rubros1 = fr["rubros[1]"];
    // Miramos que uno y sólo uno esté seleccionado
    var seleccionados = [];
    for(var i=0; i<rubros1.length; i++) {
        if( rubros1[i].checked )        // Si está seleccionado
            seleccionados.push( rubros1[i] );
    }
    // Comprobamos que haya al menos un elemento seleccionado
    if( seleccionados.length == 0 ) {
        alert("Debe seleccionar al menos un rubro.");
        return false;
    }
    // Ahora con los elementos validamos que haya seleccionado al menos un subrubro de ellos:
    for(var i=0; i<seleccionados.length; i++) {
        // Vamos mirando su hermano y el hermano del hermano hasta encontrar un UL
        var hermanoUL = seleccionados[i].nextSibling;
        if( hermanoUL.nodeType!=1 || hermanoUL.tagName.toUpperCase()!="UL" )
            hermanoUL = hermanoUL.nextSibling;
        //Ahora hermanoUL será la lista (que damos por entendido que contiene los subrubros)
        var LIsubrubros = hermanoUL.getElementsByTagName("LI");
        var srSeleccionados = 0;
        for(var j=0; j<LIsubrubros.length; j++) {
            if( LIsubrubros[j].firstChild.checked )            //firstChild será el checkbox si no dejamos espacios en el xHTML
                srSeleccionados++;
        }
        if( srSeleccionados == 0 ) {
            alert("Debe seleccionar algún subrubro para '"+seleccionados[i].nextSibling.nodeValue+"'");
            return false
        }
    }
    // Si hemos llegado hasta aquí se supone que no han habido errores
    return true;
}



// -->
</script>

</body>
</html>

Un saludo

leo_25 · #3 (**permalink**) 15/10/2007, 18:20

bueno tienes mucha razon acerca de los errores queda mas que claro lo que el objetivo de lo que escribi era como poder validar los checkboxes como los trate de escribir lo escribi asi por que estos checkbox los genero por medio de php luego de una consulta a la base de datos y por cada rubro y subrubro le asigno un checkbox. Muchas gracias por tu respuesta. el codigo php que genera esto es el que te muestro y como seria la validación el script que posteaste tambien aplica a esto?

Código PHP:

  <?$sql ="SELECT CODIGO,DESCRIPCION FROM rubros ORDER BY DESCRIPCION"; 
                $rs = $condb->Execute($sql); 
                $result=traerResultado($rs); 
                             
                ?> 
                     <ul > 
                    <?php 
                       foreach ($result as $key => $valor) 
                       { 
                        echo "<li><input type='checkbox' name='rubros[$valor[CODIGO]]' value='<?=$valor[CODIGO]?>'>$valor[DESCRIPCION]"; 
                        $sql1="SELECT * FROM  WHERE SUBRUBROS.CODIGO ='$valor[CODIGO]'"; 
                        $rs1 = $condb->Execute($sql1); 
                        $result1=traerResultado($rs1); 
                        echo"<ul>"; 
                        foreach ($result1 as $key1=> $valor1) 
                        {  echo"<li><input type='checkbox' name='subrubros[$valor1[CODIGO]][$valor1[COD_SUBRUBRO]]' value='<?=$valor1[COD_SUBRUBRO]?>'>".$valor1['DESCRIPCION']."</li>"; 
                             
                        } 
                        echo "</ul>"; 
                        echo "</li>"; 
                     
                        }

derkenuke · #4 (**permalink**) 16/10/2007, 16:11

Hola de nuevo leo_25:

En lo que refiere al HTML, debes cerciorarte de que lo que te genera está bien. A simple vista lo veo bien, pero no está de más hacer una generación cualquiera y mirar su código (que es el código que deberías haber posteado aquí).

La idea te la he dado hecha. No sé cuanto se puede extender rubros[x], ni cuando subrubros[x][y]; pero haciendo más o menos bucles la cosa tendría que salir igual tal y como está en mi ejemplo. Si necesitas más rubros, basta con hacer un for() englobandolo todo. Si necesitas más subrubros, el script debería estar preparado para ello, ya que cogemos todos los LI de la lista (UL) hermana al rubro en cuestión.

Un saludo.

PD: Intenta poner un signo de puntuación cada, digamos, 8 o 10 palabras. Una frase de 63 palabras... es imposible de leer con coherencia.

leo_25 · #5 (**permalink**) 16/10/2007, 19:45

derkenuke te muestro una parte de los 'X' rubros y de los 'xy' subrubros. aqui el codigo html que obtengo

Código HTML:

<form onsubmit="return valida(this)" action="">
    <input type='checkbox' name='rubros[1]' value='x' />Alimentos
    <ul id="uno">
        <li><input type='checkbox' name='subrubros[1][2]' value='a' />Frutas</li>
        <li><input type='checkbox' name='subrubros[1][3]' value='b' />Verduras</li>
    </ul>
    <input type='checkbox' name='rubros[2]' value='x' />Prendas de vestir
    <ul id="dos">
        <li><input type='checkbox' name='subrubros[2][2]' value='a' />Vestidos</li>
        <li><input type='checkbox' name='subrubros[2][3]' value='b' />Camisas</li>
    </ul>
<input type='checkbox' name='rubros[3]' value='x' />Bebidas
    <ul id="">
        <li><input type='checkbox' name='subrubros[3][2]' value='a' />Gaseosas</li>
        <li><input type='checkbox' name='subrubros[3][3]' value='b' />Agua Mineral</li>
    </ul>

    <button type="submit">Envia</button>
</form>

te agradeceria una vez mas si me ayudas con los for para esto ya que me estoy rompiendo la cabeza y hasta ahora no tengo ningun resultado.

derkenuke · #6 (**permalink**) 17/10/2007, 08:40

Hola leo_25:

Viéndolo así ya nos podemos hacer a la idea. La estructura cambia, no sólo hay rubros[1] sino que hay rubros[1], [2], [3]....

Bueno, este script está preparado, creo, para todo lo que pides:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>
<style type="text/css">

</style>
</head>

<body>

<form onsubmit="return valida(this)" action="">
    <input type='checkbox' name='rubros[1]' value='x' />Alimentos
    <ul id="uno">
        <li><input type='checkbox' name='subrubros[1][2]' value='a' />Frutas</li>
        <li><input type='checkbox' name='subrubros[1][3]' value='b' />Verduras</li>
    </ul>
    <input type='checkbox' name='rubros[2]' value='x' />Prendas de vestir
    <ul id="dos">
        <li><input type='checkbox' name='subrubros[2][2]' value='a' />Vestidos</li>
        <li><input type='checkbox' name='subrubros[2][3]' value='b' />Camisas</li>
    </ul>
<input type='checkbox' name='rubros[3]' value='x' />Bebidas
    <ul id="">
        <li><input type='checkbox' name='subrubros[3][2]' value='a' />Gaseosas</li>
        <li><input type='checkbox' name='subrubros[3][3]' value='b' />Agua Mineral</li>
    </ul>

    <button type="submit">Envia</button>
</form>


<script type="text/javascript">
<!--


function valida(fr) {
    var hayRubroSeleccionado = false;
    // Buscamos e iteramos con todos los elementos que se llamen rubros[x]
    for(var x=1, rubroX; (rubroX = fr["rubros["+x+"]"]); x++) {
        // Siempre que esté seleccionado
        if( rubroX.checked ) {
            hayRubroSeleccionado = true;
            //Validemos si hay subrubros seleccionados
            // Vamos mirando su hermano y el hermano del hermano hasta encontrar un UL
            var hermanoUL = rubroX.nextSibling;
            if( hermanoUL.nodeType!=1 || hermanoUL.tagName.toUpperCase()!="UL" )
                hermanoUL = hermanoUL.nextSibling;
            //Ahora hermanoUL será la lista que hay al lado (que damos por entendido que contiene los subrubros)
            var LIsubrubros = hermanoUL.getElementsByTagName("LI");
            var srSeleccionados = 0;            // número de sburubros seleccionados
            for(var j=0; j<LIsubrubros.length; j++) {        //recorremos los elementos LI
                if( LIsubrubros[j].firstChild.checked )            //firstChild será el checkbox si no dejamos espacios en el xHTML
                    srSeleccionados++;
            }
            if( srSeleccionados == 0 ) {
                alert("Debe seleccionar algún subrubro para '"+rubroX.nextSibling.nodeValue+"'");
                return false;
            }
        } //if rubro.checked
    }
    // Comprobamos que haya al menos un rubro seleccionado. Si hay devolvemos true, si no hay devolvemos false
    if( hayRubroSeleccionado ) {
        alert("Todo correcto!");
    }
    else {
        alert("Debe seleccionar al menos un rubro");
        return false;
    }
}



// -->
</script>

</body>
</html>

Testéalo. Supongo que nos quedarán pocas modificaciones para la versión final.

Un saludo

leo_25 · #7 (**permalink**) 17/10/2007, 09:33

muchas gracias derkenuke por tu ayuda te comento que hice solo una pequeña modificacion al script y tambien me funciono no se si estoy haciendo bien por eso te lo comento. las modificaciones son:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">

</style>
</head>

<body>

<form onsubmit="return valida(this)" action="">
    <input type='checkbox' id='rubros[]' name='rubros[]' value='x' />Alimentos
    <ul id="uno">
        <li><input type='checkbox' name='subrubros[1][2]' value='a' />Frutas</li>
        <li><input type='checkbox' name='subrubros[1][3]' value='b' />Verduras</li>
    </ul>
    <input type='checkbox' [B]id='rubros[]' [/B] name='rubros[1]' value='x' />Prendas de vestir
    <ul id="dos">
        <li><input type='checkbox' name='subrubros[1][2]' value='a' />Vestidos</li>
        <li><input type='checkbox' name='subrubros[1][3]' value='b' />Camisas</li>
    </ul>
    <button type="submit">Envia</button>
</form>


<script type="text/javascript">
<!--


function valida(fr) {
    // Buscamos todos los elementos que se llamen subrubros[1]
    var rubros1 = [B]fr["rubros[]"];[/B]
    // Miramos que uno y sólo uno esté seleccionado
    var seleccionados = [];
    for(var i=0; i<rubros1.length; i++) {
        if( rubros1[i].checked )        // Si está seleccionado
            seleccionados.push( rubros1[i] );
    }
    // Comprobamos que haya al menos un elemento seleccionado
    if( seleccionados.length == 0 ) {
        alert("Debe seleccionar al menos un rubro.");
        return false;
    }
    // Ahora con los elementos validamos que haya seleccionado al menos un subrubro de ellos:
    for(var i=0; i<seleccionados.length; i++) {
        // Vamos mirando su hermano y el hermano del hermano hasta encontrar un UL
        var hermanoUL = seleccionados[i].nextSibling;
        if( hermanoUL.nodeType!=1 || hermanoUL.tagName.toUpperCase()!="UL" )
            hermanoUL = hermanoUL.nextSibling;
        //Ahora hermanoUL será la lista (que damos por entendido que contiene los subrubros)
        var LIsubrubros = hermanoUL.getElementsByTagName("LI");
        var srSeleccionados = 0;
        for(var j=0; j<LIsubrubros.length; j++) {
            if( LIsubrubros[j].firstChild.checked )            //firstChild será el checkbox si no dejamos espacios en el xHTML
                srSeleccionados++;
        }
        if( srSeleccionados == 0 ) {
            alert("Debe seleccionar algún subrubro para '"+seleccionados[i].nextSibling.nodeValue+"'");
            return false
        }
    }
    // Si hemos llegado hasta aquí se supone que no han habido errores
    return true;
}



// -->
</script>

</body>
</html>

derkenuke · #8 (**permalink**) 17/10/2007, 10:21

Sí, tus modificaciones son correctas, y mientras te funcione nos quedaremos contentos

Un saludo.