Pregunta Atributo requerido en múltiples casillas de verificación con el mismo nombre? [duplicar]


Esta pregunta ya tiene una respuesta aquí:

Tengo una lista de casillas de verificación con el mismo nombre atributo, y necesito validar que al menos uno de ellos ha sido seleccionado.

Pero cuando uso el atributo html5 "required" en todos ellos, el navegador (chrome & ff) no me permite enviar el formulario a menos que estén todos 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 />

Al usar lo mismo con las entradas de radio, el formulario funciona como se espera (si se selecciona una de las opciones, la forma valida)

De acuerdo a Joe Hopfgartner (que dice citar las especificaciones html5), el supuesto comportamiento es:

Para casillas de verificación, el atributo requerido solo se cumplirá cuando se marquen una o más de las casillas de verificación con ese nombre en esa forma.

Para los botones de opción, el atributo requerido solo se cumplirá cuando se marque exactamente uno de los botones de opción de ese grupo de radio.

¿estoy haciendo algo mal, o es esto un error del navegador (en ambos chrome & ff) ??


26
2018-05-04 13:58


origen


Respuestas:


Lo siento, ahora que he leído lo que esperabas mejor, entonces estoy actualizando la respuesta.

Basado en Especificaciones de HTML5 del W3C, nada está mal. yo 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 utilizable (de hecho, muchas personas se han quejado en el Listas de correo del W3C)

Pero los navegadores solo siguen las recomendaciones de la norma, 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 puedes usar JavaScript para la validación de formularios, como un gran complemento de validación jQuery.

Otro enfoque sería elegir un polyfill eso puede hacer que (casi) todos los navegadores interpreten correctamente la validación del formulario.


15
2018-05-04 14:06



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 [requerida]') selecciona todas las casillas de verificación con el atributo necesario, entonces, con el .cambio método aplicado a este grupo de casillas de verificación, puede ejecutar función quieres cuando cambia cualquier elemento de este grupo. En este caso, si alguna de las casillas de verificación está marcada, elimino necesario atributo para todas las casillas de verificación que son parte del grupo seleccionado.

Espero que esto ayude.

Despedida.


24
2017-07-21 09:42



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 verifica 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');
    }

 });

5
2018-04-02 16:39



Aquí hay una mejora para la respuesta de icova. También agrupa 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');
        }
      });
    }();
  }

});

4
2018-01-25 03:37



Proporcionar otro enfoque similar a la respuesta de @IvanCollantes. Funciona filtrando adicionalmente las casillas de verificación requeridas por su 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>


2
2017-12-04 21:00



Una pequeña corrección 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');
        }
    });
});

1
2017-10-31 11:53



Basándose en la respuesta de icova, este es 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('');});
    });
});

0
2018-05-05 12:57



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);

}

0
2017-11-25 12:52