forms - obligatorio - multiple checkbox required html5
¿Utiliza el atributo HTML5 "requerido" para un grupo de casillas de verificación? (9)
Al usar los navegadores más nuevos que admiten HTML5 (Firefox 4 por ejemplo);
y un campo de formulario tiene el atributo required=''required'' ;
y el campo de formulario está vacío / en blanco;
y se hace clic en el botón de enviar;
los navegadores detectan que el campo "requerido" está vacío y no envía el formulario;
en su lugar, el navegador muestra una sugerencia para que el usuario escriba texto en el campo.
Ahora, en lugar de un único campo de texto, tengo un grupo de casillas de verificación , de las cuales al menos una debe ser revisada / seleccionada por el usuario.
¿Cómo puedo usar el atributo required HTML5 en este grupo de casillas de verificación? (Como solo se debe marcar una de las casillas, no puedo poner el atributo required en todas y cada una de las casillas de verificación)
PD. Estoy usando simple_form , si eso importa.
ACTUALIZAR
¿Podría el atributo multiple HTML 5 ser útil aquí? ¿Alguien lo ha usado antes para hacer algo similar a mi pregunta?
ACTUALIZAR
Parece que esta característica no es compatible con las especificaciones de HTML5: ISSUE-111: ¿Qué significa input. @ Required para @type = checkbox?
(Estado del problema: el problema se ha marcado como cerrado sin prejuicios ) . Y aquí está la explicación .
ACTUALIZACIÓN 2
Es una vieja pregunta, pero quería aclarar que la intención original de la pregunta era poder hacer lo anterior sin usar Javascript, es decir, utilizando una forma HTML5 de hacerlo. En retrospectiva, debería haber hecho el "sin Javascript" más obvio.
¡Aquí hay otro truco simple usando Jquery!
HTML
<form id="hobbieform">
<div>
<input type="checkbox" name="hobbies[]">Coding
<input type="checkbox" name="hobbies[]">Gaming
<input type="checkbox" name="hobbies[]">Driving
</div>
</form>
JQuery
$(''#hobbieform'').on("submit", function (e) {
var arr = $(this).serialize().toString();
if(arr.indexOf("hobbies") < 0){
e.preventDefault();
alert("You must select at least one hobbie");
}
});
Eso es todo ... esto funciona porque si no se selecciona ninguna casilla de verificación, nada en lo que respecta al grupo de casilla de verificación (incluido su nombre) se publica en el servidor
Es un truco simple. Este es el código jQuery que puede explotar la validación html5 cambiando las propiedades required si se marca alguna. A continuación está su código html (asegúrese de agregar el requerido para todos los elementos en el grupo).
<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5
A continuación está el script jQuery, que deshabilita la comprobación de validación adicional si se selecciona alguno. Seleccione usando el elemento de nombre.
$cbx_group = $("input:checkbox[name=''option[]'']");
$cbx_group = $("input:checkbox[id^=''option-'']"); // name is not always helpful ;)
$cbx_group.prop(''required'', true);
if($cbx_group.is(":checked")){
$cbx_group.prop(''required'', false);
}
Aquí hay un pequeño error: como está utilizando la validación de html5, asegúrese de ejecutar esto antes de que se valide, es decir, antes de enviar el formulario.
// but this might not work as expected
$(''form'').submit(function(){
// code goes here
});
// So, better USE THIS INSTEAD:
$(''button[type="submit"]'').on(''click'', function() {
// skipping validation part mentioned above
});
HTML5 no admite directamente que requiera que solo se marque una casilla o al menos una 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;
}
}
}
El javascript se asegurará de que al menos una casilla de verificación esté marcada, luego se eliminará todo el grupo de casillas de verificación. Si la casilla de verificación que está marcada no está marcada, ¡volverá a requerir todas las casillas de verificación!
Hola, solo use un cuadro de texto adicional al grupo de la casilla de verificación. Al hacer clic en cualquier casilla de verificación, ponga valores en ese cuadro de texto. Haga que ese cuadro de texto sea obligatorio y de solo lectura.
Inspirado por las respuestas de @thegauraw y @Brian Woodward, he aquí un poco para los usuarios de JQuery, incluido un mensaje de error de validación personalizado:
$cbx_group = $("input:checkbox[name^=''group'']");
$cbx_group.on("click", function() {
if ($cbx_group.is(":checked")) {
// checkboxes become unrequired as long as one is checked
$cbx_group.prop("required", false).each(function() {
this.setCustomValidity("");
});
} else {
// require checkboxes and set custom validation error message
$cbx_group.prop("required", true).each(function() {
this.setCustomValidity("Please select at least one checkbox.");
});
}
});
Tenga en cuenta que mi formulario tiene algunas casillas de verificación marcadas por defecto.
Tal vez algunos de ustedes, los asistentes de JavaScript / JQuery, podrían aumentar aún más las cosas.
Lamentablemente, HTML5 no proporciona una forma lista para hacerlo.
Sin embargo, al utilizar jQuery, puede 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 devuelve true si se true al menos un elemento. En función de eso, puede implementar su verificación de validación.
Supongo que no hay una forma estándar HTML5 para hacer esto, pero si no te importa usar una biblioteca jQuery, he podido lograr una validación de "grupo de verificación" usando la webshims validación de " webshims grupo" de webshims :
Los group-required dicen:
Si una casilla de verificación tiene la clase ''requerida por el grupo'', debe marcarse al menos una de las casillas con el mismo nombre dentro del formulario / documento.
Y aquí hay un ejemplo de cómo lo usarías:
<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
Uso principalmente webshims para rellenar funciones HTML5, pero también tiene algunas excelentes extensiones opcionales como esta.
Incluso le permite escribir sus propias reglas de validez personalizadas. Por ejemplo, necesitaba crear un grupo de casilla de verificación que no se basara en el nombre de la entrada, así que escribí mi propia regla de validez para eso ...
Tuve el mismo problema y mi solución fue esta:
HTML:
<form id="processForm.php" action="post">
<div class="input check_boxes required wish_payment_type">
<div class="wish_payment_type">
<span class="checkbox payment-radio">
<label for="wish_payment_type_1">
<input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
</label>
</span>
<span class="checkbox payment-radio">
<label for="wish_payment_type_2">
<input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
</label>
</span>
<span class="checkbox payment-radio">
<label for="wish_payment_type_3">
<input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
</label>
<input id=''submit'' type="submit" value="Submit">
</div>
</form>
JS:
var verifyPaymentType = function () {
var checkboxes = $(''.wish_payment_type .checkbox'');
var inputs = checkboxes.find(''input'');
var first = inputs.first()[0];
inputs.on(''change'', function () {
this.setCustomValidity('''');
});
first.setCustomValidity(checkboxes.find(''input:checked'').length === 0 ? ''Choose one'' : '''');
}
$(''#submit'').click(verifyPaymentType);
también podemos hacerlo fácilmente con html5, solo necesitamos agregar un código jquery
HTML
<form>
<div class="form-group options">
<input type="checkbox" name="type[]" value="A" required /> A
<input type="checkbox" name="type[]" value="B" required /> B
<input type="checkbox" name="type[]" value="C" required /> C
<input type="submit">
</div>
</form>
Jquery
$(function(){
var requiredCheckboxes = $(''.options :checkbox[required]'');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is('':checked'')) {
requiredCheckboxes.removeAttr(''required'');
} else {
requiredCheckboxes.attr(''required'', ''required'');
}
});
});