html - span - plantillas contact form 7
¿Atributo requerido en múltiples casillas de verificación con el mismo nombre? (8)
Esta pregunta ya tiene una respuesta aquí:
Tengo una lista de casillas de verificación con el mismo atributo de nombre y necesito validar que al menos una de ellas ha sido seleccionada.
Pero cuando uso el atributo html5 "requerido" en todos ellos, el navegador (chrome & ff) no me permite enviar el formulario a menos que todos estén marcados.
Código de muestra:
<label for="a-0">a-0</label>
<input type="checkbox" name="q-8" id="a-0" required />
<label for="a-1">a-1</label>
<input type="checkbox" name="q-8" id="a-1" required />
<label for="a-2">a-2</label>
<input type="checkbox" name="q-8" id="a-2" required />
Cuando se usa lo mismo con entradas de radio, el formulario funciona como se esperaba (si se selecciona una de las opciones, el formulario se valida)
Según Joe Hopfgartner (quien dice citar las especificaciones de html5), el supuesto comportamiento es:
Para las casillas de verificación, el atributo requerido solo se cumplirá cuando una o más de las casillas de verificación con ese nombre en esa forma estén marcadas.
Para los botones de radio, el atributo requerido solo se cumplirá cuando se marque exactamente uno de los botones de radio en ese grupo de radio.
¿Estoy haciendo algo mal o es un error del navegador (tanto en chrome como en ff)?
Aquí hay una mejora para la respuesta de icova. También agrupa las entradas por nombre.
$(function(){
var allRequiredCheckboxes = $('':checkbox[required]'');
var checkboxNames = [];
for (var i = 0; i < allRequiredCheckboxes.length; ++i){
var name = allRequiredCheckboxes[i].name;
checkboxNames.push(name);
}
checkboxNames = checkboxNames.reduce(function(p, c) {
if (p.indexOf(c) < 0) p.push(c);
return p;
}, []);
for (var i in checkboxNames){
!function(){
var name = checkboxNames[i];
var checkboxes = $(''input[name="'' + name + ''"]'');
checkboxes.change(function(){
if(checkboxes.is('':checked'')) {
checkboxes.removeAttr(''required'');
} else {
checkboxes.attr(''required'', ''required'');
}
});
}();
}
});
Lo siento, ahora he leído mejor lo que esperaba, así que estoy actualizando la respuesta.
Basado en las especificaciones de HTML5 de W3C, nada está mal. Creé esta prueba JSFiddle y se comporta correctamente según las especificaciones (para aquellos navegadores basados en las especificaciones, como Chrome 11 y Firefox 4):
<form>
<input type="checkbox" name="q" id="a-0" required autofocus>
<label for="a-0">a-1</label>
<br>
<input type="checkbox" name="q" id="a-1" required>
<label for="a-1">a-2</label>
<br>
<input type="checkbox" name="q" id="a-2" required>
<label for="a-2">a-3</label>
<br>
<input type="submit">
</form>
Estoy de acuerdo en que no es muy útil (de hecho, muchas personas se han quejado de ello en las listas de correo del W3C ).
Pero los navegadores solo siguen las recomendaciones del estándar, lo cual es correcto. El estándar es un poco engañoso, pero no podemos hacer nada al respecto en la práctica. Sin embargo , siempre puede usar JavaScript para la validación de formularios , como un excelente complemento de validación de jQuery.
Otro enfoque sería elegir un polyfill que pueda hacer (casi) todos los navegadores interpretar correctamente la validación de formularios.
Para proporcionar otro enfoque similar a la respuesta por @IvanCollantes. Funciona filtrando adicionalmente las casillas de verificación requeridas por nombre. También simplifiqué un poco el código.
jQuery(document).ready(function($) {
var requiredCheckboxes = $('':checkbox[required]'');
requiredCheckboxes.on(''change'', function(e) {
var checkboxGroup = requiredCheckboxes.filter(''[name="'' + $(this).attr(''name'') + ''"]'');
var isChecked = checkboxGroup.is('':checked'');
checkboxGroup.prop(''required'', !isChecked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form target="_blank">
<p>
At least one checkbox from each group is required...
</p>
<fieldset>
<legend>Checkboxes Group test</legend>
<label>
<input type="checkbox" name="test[]" value="1" required="required">test-1
</label>
<label>
<input type="checkbox" name="test[]" value="2" required="required">test-2
</label>
<label>
<input type="checkbox" name="test[]" value="3" required="required">test-3
</label>
</fieldset>
<br>
<fieldset>
<legend>Checkboxes Group test2</legend>
<label>
<input type="checkbox" name="test2[]" value="1" required="required">test2-1
</label>
<label>
<input type="checkbox" name="test2[]" value="2" required="required">test2-2
</label>
<label>
<input type="checkbox" name="test2[]" value="3" required="required">test2-3
</label>
</fieldset>
<hr>
<button type="submit" value="submit">Submit</button>
</form>
Puedes hacerlo con jQuery a menos líneas:
$(function(){
var requiredCheckboxes = $('':checkbox[required]'');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is('':checked'')) {
requiredCheckboxes.removeAttr(''required'');
}
else {
requiredCheckboxes.attr(''required'', ''required'');
}
});
});
Con $ ('': casilla de verificación [requerido]'') selecciona todas las casillas de verificación con el atributo requerido , luego, con el método .change aplicado a este grupo de casillas de verificación, puede ejecutar la función que desee cuando cambie cualquier elemento de este grupo. En este caso, si alguna de las casillas está marcada, elimino el atributo requerido para todas las casillas que forman parte del grupo seleccionado.
Espero que esto ayude.
Despedida.
Sobre la base de la respuesta de icova, aquí está el código para que pueda usar un mensaje de validación HTML5 personalizado:
$(function() {
var requiredCheckboxes = $('':checkbox[required]'');
requiredCheckboxes.change(function() {
if (requiredCheckboxes.is('':checked'')) {requiredCheckboxes.removeAttr(''required'');}
else {requiredCheckboxes.attr(''required'', ''required'');}
});
$("input").each(function() {
$(this).on(''invalid'', function(e) {
e.target.setCustomValidity('''');
if (!e.target.validity.valid) {
e.target.setCustomValidity(''Please, select at least one of these options'');
}
}).on(''input, click'', function(e) {e.target.setCustomValidity('''');});
});
});
Tuve el mismo problema, mi solución fue aplicar el atributo requerido a todos los elementos.
<input type="checkbox" name="checkin_days[]" required="required" value="0" /><span class="w">S</span>
<input type="checkbox" name="checkin_days[]" required="required" value="1" /><span class="w">M</span>
<input type="checkbox" name="checkin_days[]" required="required" value="2" /><span class="w">T</span>
<input type="checkbox" name="checkin_days[]" required="required" value="3" /><span class="w">W</span>
<input type="checkbox" name="checkin_days[]" required="required" value="4" /><span class="w">T</span>
<input type="checkbox" name="checkin_days[]" required="required" value="5" /><span class="w">F</span>
<input type="checkbox" name="checkin_days[]" required="required" value="6" /><span class="w">S</span>
cuando el usuario marca uno de los elementos, elimino el atributo requerido de todos los elementos:
var $checkedCheckboxes = $(''#recurrent_checkin :checkbox[name="checkin_days[]"]:checked''),
$checkboxes = $(''#recurrent_checkin :checkbox[name="checkin_days[]"]'');
$checkboxes.click(function() {
if($checkedCheckboxes.length) {
$checkboxes.removeAttr(''required'');
} else {
$checkboxes.attr(''required'', ''required'');
}
});
Un pequeño arreglo de jQuery:
$(function(){
var chbxs = $('':checkbox[required]'');
var namedChbxs = {};
chbxs.each(function(){
var name = $(this).attr(''name'');
namedChbxs[name] = (namedChbxs[name] || $()).add(this);
});
chbxs.change(function(){
var name = $(this).attr(''name'');
var cbx = namedChbxs[name];
if(cbx.filter('':checked'').length>0){
cbx.removeAttr(''required'');
}else{
cbx.attr(''required'',''required'');
}
});
});
var verifyPaymentType = function () {
//coloque os checkbox dentro de uma div com a class checkbox
var inputs = window.jQuery(''.checkbox'').find(''input'');
var first = inputs.first()[0];
inputs.on(''change'', function () {
this.setCustomValidity('''');
});
first.setCustomValidity( window.jQuery(''.checkbox'').find(''input:checked'').length === 0 ? ''Choose one'' : '''');
}
window.jQuery(''#submit'').click(verifyPaymentType);
}