¿Utiliza el atributo "requerido" de HTML5 para un grupo de casillas de verificación?
Cuando utilice navegadores más nuevos que admitan HTML5 (FireFox 4, por ejemplo);
y un campo de formulario tiene el atributo required='required';
y el campo del formulario está vacío/en blanco;
y se hace clic en el botón enviar;
el navegador detecta que el campo "obligatorio" está vacío y no envía el formulario;
en su lugar, el navegador muestra una sugerencia que solicita al usuario que escriba texto en el campo.
Ahora, en lugar de un solo campo de texto, tengo un grupo de casillas de verificación , de las cuales el usuario debe marcar/seleccionar al menos una.
¿ Cómo puedo utilizar el requiredatributo HTML5 en este grupo de casillas de verificación? (Dado que solo es necesario marcar una de las casillas de verificación, no puedo poner el requiredatributo en todas y cada una de las casillas de verificación)
PD. Estoy usando simple_form , si eso importa.
ACTUALIZAR
¿Podría resultar útil el atributo HTML 5 en este caso? multiple¿Alguien lo ha usado antes para hacer algo similar a mi pregunta?
ACTUALIZAR
Parece que esta característica no es compatible con la especificación HTML5: PROBLEMA-111: ¿Qué significa input.@required para @type = checkbox?
(Estado del problema: el problema se ha marcado como cerrado sin perjuicio ). Y aquí está la explicación .
ACTUALIZACIÓN 2
Es una pregunta antigua, pero quería aclarar que la intención original de la pregunta era poder hacer lo anterior sin usar Javascript, es decir, usar una forma HTML5 de hacerlo. En retrospectiva, debería haber hecho más obvio el "sin Javascript".
Desafortunadamente, HTML5 no proporciona una forma lista para usar de hacerlo.
Sin embargo, usando jQuery, puedes controlar fácilmente si un grupo de casillas de verificación tiene al menos un elemento marcado.
Considere el siguiente fragmento de DOM:
<div class="checkbox-group required">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
<input type="checkbox" name="checkbox_name[]">
</div>
Puedes usar esta expresión:
$('div.checkbox-group.required :checkbox:checked').length > 0
que regresa truesi se marca al menos un elemento. En base a eso, puede implementar su verificación de validación.
HTML5 no admite directamente la exigencia de marcar solo una o al menos una casilla de verificación en un grupo de casillas de verificación. Aquí está mi solución usando Javascript:
HTML
<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> Two
JAVASCRIPT
function deRequireCb(elClass) {
el = document.getElementsByClassName(elClass);
var atLeastOneChecked = false; //at least one cb is checked
for (i = 0; i < el.length; i++) {
if (el[i].checked === true) {
atLeastOneChecked = true;
}
}
if (atLeastOneChecked === true) {
for (i = 0; i < el.length; i++) {
el[i].required = false;
}
} else {
for (i = 0; i < el.length; i++) {
el[i].required = true;
}
}
}
JavaScript garantizará que al menos una casilla de verificación esté marcada y luego eliminará la necesidad de todo el grupo de casillas de verificación. Si la única casilla de verificación que está marcada deja de estar marcada, ¡se requerirán todas las casillas de verificación nuevamente!
