[SOLUCIONADO] Problema para validar checkbox!

[berkeleyPunk]

Buenas tardes.

Tengo un formulario con varios checkbox. Necesito validarlos. La idea es que la persona debe seleccionar al menos 1 casilla.
Espero puedan ayudarme.
Valido así:

Código Javascript:

function x()
{
        casilla = false;
        
        var todasLasCasillas = document.mi_formulario.checkBox; //Todos los checkbox tienen como name "checkBox"
        
        for (var i=0; i<todasLasCasillas.length; i++)
        {
            if (todasLasCasillas[i] == "checked")
            {
                var casilla = true;
                break;
            }
        }
 
 
        if ( casilla == false )
        {
            document.write("NO hay ninguna casilla seleccionada");
return;
        }
        else
        {
            document.write("Hay al menos 1 casilla seleccionada");
return;
        }
    }
 

}

Código HTML:

<input type="checkbox" name="checkBox" value="Radio" onblur="x()" />
<input type="checkbox" name="checkBox" value="Televisión" onblur="x()" />
<input type="checkbox" name="checkBox" value="Youtube" onblur="x()" />
<input type="checkbox" name="checkBox" value="Facebook" onblur="x()" />
 

Tal cosa no funciona.
Como verán, esta función se ejecuta cuando le quitamos el foco a un checkbox. En pantalla no se muestra ni el mensaje de que hay al menos 1 casilla seleccionada ni el mensaje de que NO hay ninguna casilla seleccionada.



Saludos cordiales.

[caricatos]

Hola:

Nunca debe usarse document.write con la página cargada, ya que machaca el contenido.

Tiene poco sentido la validación en "onblur"... y aunque sería mejor onchange, el evento que me pareco mejor es el envío del formulario...

Saludos

[berkeleyPunk]

Iniciado por caricatos

Hola:

Nunca debe usarse document.write con la página cargada, ya que machaca el contenido.

Tiene poco sentido la validación en "onblur"... y aunque sería mejor onchange, el evento que me pareco mejor es el envío del formulario...

Saludos

Gracias por responder maestro caricatos. Tengo varias anotaciones acerca de tu comentario. Espero puedas comentarlos.

1. Comentas que Tiene poco sentido la validación en "onblur". Mi idea es que cuando se validen todos los campos, aparezca un GIF animado apuntando al botón enviar (qué extrañamente nadie ve en mi formulario). Lo que se me ocurrió fue poner el onblur para que una vez que el usuario termine de llenar todos los campos, aparezca el mencionado GIF. Como sea, voy a experimentar con el onchange, como comentas.

2. No entiendo eso de que Nunca debe usarse document.write con la página cargada, ya que machaca el contenido. ¿Cómo que el document.write con la página cargada? ¿Te refieres a la página desplegada en el navegador o cómo? ¿Machaca el contenido? ¿Qué debo entender por "machacar"?

3. También comentas que el evento que me pareco mejor es el envío del formulario Tengo un botó enviar, que al dar clic se activa una función que valida todos los campos (no es la función x que puse aquí, la cual fue sólo de ejemplo para no aturdir al lector con inf que yo creo que no necesita ver).

4. Pero independientemente que sea mejor el onchange que el onblur, desde tu perspectiva, ¿el código que puse inicialmente debería funcionar bien? ¿Encuentras algún problema?

Saludos cordiales.

[caricatos]

Hola:

onblur es un manejador de eventos que se dispara cuando el elemento pierde el foco, y no cuando cambia... Se puede perder el foco sin cambiar el contenido

Pero lo que tienes que saber es que lo que tienes peor es el uso de document.write.

Solo debe usarse mientras se carga la página (y si no es necesario, directamente olvidarse de que existe). Lo de machacar es así de contundente... deja de existir todo (hasta el tag html)

Haz la prueba desde cualquier página inyectando en la url:
javascript:document.write("Hola")

... Si no te importa donde escribir puedes usar:

document.body.innerHTML += "lo que sea";

O tener ocultos los mensajes y tras la comprobación mostrar el que corresponda.

Saludos

[berkeleyPunk]

Gracias por responder maestro caricatos. Lo del document.write lo puse nada más por poner algo en el ejemplo, no porque mi código esté así. Sin embargo, nunca he tenido reparo en usarlo a diestra y siniestra. Francamente no entendí a qué te refieres con eso de que hasta la etiqueta HTML se ve comprometida al usar el document.write (digo esto, porque nunca, creo, he visto "extraños" en pantalla al usar document.write -o quizá no he puesto atención. No sé). Pero voy a googlear para ver si encuentro más inf al respecto.

Por otro lado, quizá en el futuro encuentre solución al problema que me hizo abrir este post.

Lo bueno del asunto fue que se me ocurrió una solución bastante simple. No es muy elegante pero funciona. La pongo aquí por si a alguien más novato que yo llega aquí y le sirve.

Código Javascript:

if ( (nombre == "") || (apellidos == "") || (email == "") || ( (casilla01 == false) && (casilla02 == false) && (casilla03 == false) && (casilla04 == false) && (casilla05 == false)  ) )
        {
            ...aquí pongo lo debido en caso que algún campo no esté completado
            return;
        }
        else
        {
            ...aquí pongo lo debido en caso que todos los campos estén completados.
            return;
        }
 

Saludos y hasta luego.