Porque falla "checked" en javascript?

[maiksix]

Hola!

Estoy intentando hacer que un input del tipo radio sea obligatorio en el formulario, he estado buscando en el foro y google y he encontrado algunos ejemplos.

He hecho la siguiente condición dentro de un script lleno de condiciones que sacan alertas en función del fallo:

Código:

if(document.formulario.Categoria.checked){
}else{
alert("El campo categoria está vacio");
return false;
}

No se porque no funciona, concretamente el input radio es este:

Código:

 <table style="width:1024">

                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>Alevín</b></center><br><center><input style="margin-top:-20px;"  id="Categoria" onclick="toggle(this)"  size="40" type="radio" name="Categoria" value="Alevin" ></center><br></font></td> 
                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>Cadete</b></center><br><center><input style="margin-top:-20px;"  id="Categoria"  onclick="toggle(this)"  size="40" type="radio" name="Categoria" value="Cadete" ></center><br></font></td>
                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>Junior</b></center><br><center><input style="margin-top:-20px;" id="Categoria" onclick="toggle(this)"  size="40" type="radio" name="Categoria" value="Junior" ></center><br></font></td>
                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>Senior</b></center><br><center><input style="margin-top:-20px;" id="Categoria"  onclick="toggle(this)"   size="40" type="radio" name="Categoria" value="Senior" ></center><br></font></td>
                <td style="width:auto; height:50px;border: black 0px solid;"><center><font size='6'; font color='white'><br><b>Senior-KZ2</b></center><br><center><input style="margin-top:-20px;" id="Categoria" onclick="toggle(this)" size="40" type="radio" name="Categoria" value="Senior-KZ2"></center><br></font></td>
        </table>

La función que llaman al hacer click en el input no es la que está el script que he subido aquí, es otra función diferente.

Muchas gracias! Un saludo

[Alexis88]

Si deseas que un campo del formulario sea obligatorio, añádele el atributo required.

Saludos

[caricatos]

Hola:

Los radios suelen ser más de uno (sería incomprensible de otra manera), y por lo que veo repites id, cosa no permitida, y lo permitido (y aconsejable), que cumple tu código es repetir el nombre (name)... pero en tal caso se usa un índice, que no veo que estés contemplando)...

Sobre el código, son obsoletas las etiquetas center y font... los id no deben repetirse...

Saludos

[maiksix]

Hola!

Gracias por vuestra ayuda.

Alexis, he añadido el atributo required pero en safari no salta el aviso, porque según he visto no es compatible.

Caricatos tienes razón con lo del id, lo borrare, porque además era para una prueba.

Si center y font son obsoletas que debo usar para sustituirlas?

Probare de añadir un for evaluando un índice, a ver si funciona. Os comento luego.

Gracias.

[Alexis88]

Iniciado por maiksix

Si center y font son obsoletas que debo usar para sustituirlas?

CSS.

Saludos

[maiksix]

Gracias Alexis.

He probado de añadir un índice cómo ha dicho caricatos.

Este es el código:

Código:

var a = 0; 
var rdbtn=document.getElementsByName("Categoria");
for(i=0;i<rdbtn.length;i++) {
if(rdbtn[i].checked == false) {
a++;
}
}

if(a == rdbtn.length){
	alert(El campo categoria esta vacio. Por favor rellenalo);
	return false;
}

Ahora sigue sin funcionar y además me anula el resto de la función, es decir, debajo del último if, tengo otras condiciones para evaluar otros campos y sacar diferentes alertas que funcionan perfectamente, pero al añadir esto al código no salta ninguna, ni las que funcionan....

¿Alguna sugerencia?

Gracias, un saludo!

[Alexis88]

Se anula el resto de instrucciones de la función pues el return genera eso. Creo que tiene sentido, es decir, si algo no está bien, lo recomendable sería corregirlo antes de seguir evaluando el resto. Otra opción que puedes considerar es agregar elementos <label> o <span> al costado de cada campo y cuando alguno esté incompleto, en lugar de mostrar la alerta y cortar la función, muestras un mensaje en cada <label> o <span> (el que elijas).

EJEMPLO

Saludos

[maiksix]

Gracias Alexis, tienes razón con lo del return, pero aún así no muestra la alerta y no entiendo porque.

Creo que el bucle y todo está bien hecho, ¿no? ¿Alguna idea?

Lo del label me ha gustado. Me lo mirare más a fondo y veré que hacer.

Gracias y un saludo!