Validar checkbox y radioboton con HTML5

andres_ · #1 (**permalink**) 24/02/2013, 11:58

Hola,

Veréis, tengo un formulario donde tengo varios checkbox y radioboton.

Lo que me gustaría hacer es que sea obligatorio seleccionar al menos un checkbox y un radioboton del formulario. vamos, que no se puede enviar el formulario si no hay ninguno seleccionado. En los checkbox y en los radioboton no sé dónde he de poner el elemento "required"...

Este es mi código:

Código HTML:

 <div>
			<label for="mes" name="">Mes de temporada:</label> <br />
				<input type='checkbox' name="mes[]"* value="enero">Enero
				<input type='checkbox' name="mes[]"* value="febrero">Febrero
				<input type='checkbox' name="mes[]"* value="marzo">Marzo
				<input type='checkbox' name="mes[]"* value="abril">Abril
				<input type='checkbox' name="mes[]"* value="abril">Mayo
				<input type='checkbox' name="mes[]"* value="abril">Junio
				<input type='checkbox' name="mes[]"* value="abril">Julio
				<input type='checkbox' name="mes[]"* value="abril">Agosto
				<input type='checkbox' name="mes[]"* value="abril">Septiembre
				<input type='checkbox' name="mes[]"* value="abril">Octubre
				<input type='checkbox' name="mes[]"* value="abril">Noviembre
				<input type='checkbox' name="mes[]"* value="abril">Diciembre
		</div>

		<div>

	        <label for="tipo" requiered >Tipo de verdura:</label> <br />
			<input type="radio" name="tipo[]" value="hoja"/>Hoja
			<input type="radio" name="tipo[]" value="tallo"/>Tallo
			<input type="radio" name="tipo[]" value="inflorescencia"/>Inflorescencia
			<input type="radio" name="tipo[]" value="yema"/>Yema
			<input type="radio" name="tipo[]" value="brote"/>Brote

		</div>

Gracias!!

emprear · #2 (**permalink**) 24/02/2013, 12:53

El atributo required no es aplicacle a un grupo de elementos del mismo nombre, checkboxes, radios ú otros. solo a cada input que contiene el grupo.
Para validar el que al menos uno del grupo esté chequeado utilizás javascript.
Ejemplo

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<link rel="stylesheet" href="estilos.css" media="screen" />
<script>
function validar(){
var ok = 0;
var ckbox = document.getElementsByName('mes[]');
    for (var i=0; i < ckbox.length; i++){
        if(ckbox[i].checked == true){
        ok = 1;
        }
    }
    
    if(ok == 0){
    alert('indique al menos un mes');
    return false;
    }
}
 
</script> 
</head>
<body>
<form action="#" onsubmit="return validar();">
                <input type='checkbox' name="mes[]" value="enero">Enero
                <input type='checkbox' name="mes[]" value="febrero">Febrero
                <input type='checkbox' name="mes[]" value="marzo">Marzo
                <input type='checkbox' name="mes[]" value="abril">Abril
                <input type='checkbox' name="mes[]" value="abril">Mayo
                <input type='checkbox' name="mes[]" value="abril">Junio
                <input type='checkbox' name="mes[]" value="abril">Julio
                <input type='checkbox' name="mes[]" value="abril">Agosto
                <input type='checkbox' name="mes[]" value="abril">Septiembre
                <input type='checkbox' name="mes[]" value="abril">Octubre
                <input type='checkbox' name="mes[]" value="abril">Noviembre
                <input type='checkbox' name="mes[]" value="abril">Diciembre
                <input type="submit" />
</form>
</body>
</html>

Salu2

andres_ · #3 (**permalink**) 24/02/2013, 13:01

Gracias por la respuesta emprear

No quería usar JavaScript pero creo que me va a tocar.

Gracias!!!