Utilizzando l'attributo HTML5 "obbligatorio" per un gruppo di caselle di controllo?

Quando si utilizzano i browser più recenti che supportano HTML5 (ad esempio FireFox 4);
e un campo modulo ha l'attributo required='required';
e il campo del modulo è vuoto / vuoto;
e si fa clic sul pulsante di invio;
il browser rileva che il campo "obbligatorio" è vuoto e non invia il modulo;
invece il browser mostra un suggerimento che chiede all'utente di digitare del testo nel campo.

Ora, invece di un singolo campo di testo, ho un gruppo di caselle di controllo , di cui almeno una dovrebbe essere selezionata / selezionata dall'utente.

Come posso usare l' requiredattributo HTML5 su questo gruppo di caselle di controllo? (Dal momento che solo una delle caselle di controllo deve essere selezionata, non posso mettere l' requiredattributo su ogni casella di controllo)

ps. Sto usando simple_form , se è importante.

AGGIORNARE

L' attributo HTML 5multiple potrebbe essere utile qui? Qualcuno l'ha mai usato prima per fare qualcosa di simile alla mia domanda?

AGGIORNARE

E sembra che questa caratteristica non è supportata dalle specifiche HTML5: PROBLEMA-111: Che cosa significa ingresso @ richiesta media per @type = casella di controllo.?

(Stato del problema: il problema è stato contrassegnato come chiuso senza pregiudizio. ) Ed ecco la spiegazione .

AGGIORNAMENTO 2

È una vecchia domanda, ma volevo chiarire che l'intento originale della domanda era di essere in grado di fare quanto sopra senza usare Javascript - cioè usando un modo HTML5 di farlo. In retrospettiva, avrei dovuto rendere il "senza Javascript" più ovvio.

Sfortunatamente HTML5 non fornisce un modo immediato per farlo.

Tuttavia, utilizzando jQuery, è possibile controllare facilmente se un gruppo di caselle di controllo ha almeno un elemento selezionato.

Considera il seguente frammento 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>

Puoi usare questa espressione:

$('div.checkbox-group.required :checkbox:checked').length > 0

che restituisce truese viene selezionato almeno un elemento. Sulla base di ciò, è possibile implementare il controllo di convalida.

È un trucco semplice. Questo è il codice jQuery che può sfruttare la convalida html5 modificando le requiredproprietà se qualcuno è selezionato. Di seguito è riportato il tuo codice html (assicurati di aggiungere richiesto per tutti gli elementi nel gruppo.)

<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

Di seguito è riportato lo script jQuery, che disabilita un ulteriore controllo di convalida se ne viene selezionato uno. Selezionare utilizzando l'elemento name.

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

Piccolo gotcha qui: Dal momento che stai utilizzando la convalida html5, assicurati di eseguirlo prima che venga convalidato, cioè prima dell'invio del modulo.

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

Immagino che non ci sia un modo HTML5 standard per farlo, ma se non ti dispiace usare una libreria jQuery, sono stato in grado di ottenere una convalida "gruppo checkbox" usando la funzione di convalida " gruppo-richiesto " di webshims :

I documenti per i gruppi richiesti dicono:

Se una casella di controllo ha la classe "gruppo richiesto", è necessario selezionare almeno una delle caselle di controllo con lo stesso nome all'interno del modulo / documento.

Ed ecco un esempio di come lo useresti:

<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 i webshims per eseguire il polyfill delle funzionalità HTML5, ma ha anche delle ottime estensioni opzionali come questa.

Ti consente persino di scrivere le tue regole di validità personalizzate. Ad esempio, dovevo creare un gruppo di caselle di controllo che non era basato sul nome dell'input, quindi ho scritto la mia regola di validità per quello ...

HTML5 non supporta direttamente la necessità di selezionare solo una / almeno una casella di controllo in un gruppo di caselle di controllo. Ecco la mia soluzione 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;
                }
            }
        }

Il javascript assicurerà che almeno una casella sia selezionata, quindi deseleziona l'intero gruppo di caselle. Se la casella di controllo selezionata non viene selezionata, saranno necessarie tutte le caselle di controllo!

Ho avuto lo stesso problema e la mia soluzione era questa:

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

https://jsfiddle.net/oywLo5z4/

Ispirato dalle risposte di @thegauraw e @Brian Woodward, ecco un po 'che ho messo insieme per gli utenti di JQuery, tra cui un messaggio di errore di convalida personalizzato:

$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.");
        });
    }
});

Si noti che il mio modulo ha alcune caselle di controllo selezionate per impostazione predefinita.

Forse alcuni di voi maghi JavaScript / JQuery potrebbero stringere ancora di più?

possiamo farlo facilmente anche con html5, basta aggiungere un po 'di codice jquery

dimostrazione

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

Ho aggiunto una radio invisibile a un gruppo di caselle di controllo. Quando è selezionata almeno un'opzione, anche la radio è impostata per il controllo. Quando tutte le opzioni vengono annullate, anche la radio è impostata su Annulla. Pertanto, il modulo utilizza il prompt radio "Verifica almeno un'opzione"

• Non puoi usare display: noneperché la radio non può essere focalizzata.
• Rendo la dimensione della radio uguale all'intera dimensione delle caselle di controllo, quindi è più ovvia quando richiesto.

HTML

<form>
  <div class="checkboxs-wrapper">
    <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
    <input type="checkbox" name="option[]" value="option1"/>
    <input type="checkbox" name="option[]" value="option2"/>
    <input type="checkbox" name="option[]" value="option3"/>
  </div>
  <input type="submit" value="submit"/>
</form>

Javascript

var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
    var isAtLeastOneServiceSelected = false;
    for(var i = inputs.length-1; i >= 0; --i) {
        if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
    }
    radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
    inputs[i].addEventListener('change', checkCheckboxes)
}

CSS

.checkboxs-wrapper {
  position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    pointer-events: none;
    border: none;
    background: none;
}

https://jsfiddle.net/codus/q6ngpjyc/9/

Ciao basta usare una casella di testo aggiuntiva al gruppo di casella di controllo. Quando si fa clic su una casella di controllo, inserire i valori in quella casella di testo. Rendere quella casella di testo richiesta e di sola lettura.

Mi rendo conto che ci sono un sacco di soluzioni qui, ma ho scoperto che nessuna di queste ha soddisfatto tutti i requisiti che avevo:

• Nessuna codifica personalizzata richiesta
• Il codice funziona al caricamento della pagina
• Nessuna classe personalizzata richiesta (caselle di controllo o loro padre)
• Avevo bisogno di diversi elenchi di caselle di controllo per condividere lo stesso nameper l'invio di problemi di Github tramite la loro API e stavo usando il nome label[]per assegnare etichette in molti campi del modulo (due elenchi di caselle di controllo e alcune selezioni e caselle di testo) - concesso che avrei potuto raggiungere questo obiettivo senza che condividessero lo stesso nome, ma ho deciso di provarlo e ha funzionato.

L'unico requisito per questo è jQuery. Puoi combinare questo con l'ottima soluzione di @ ewall per aggiungere messaggi di errore di convalida personalizzati.

/* required checkboxes */
(function ($) {
	$(function () {
		var $requiredCheckboxes = $("input[type='checkbox'][required]");

		/* init all checkbox lists */
		$requiredCheckboxes.each(function (i, el) {
			//this could easily be changed to suit different parent containers
			var $checkboxList = $(this).closest("div, span, p, ul, td");

			if (!$checkboxList.hasClass("requiredCheckboxList"))
				$checkboxList.addClass("requiredCheckboxList");
		});

		var $requiredCheckboxLists = $(".requiredCheckboxList");

		$requiredCheckboxLists.each(function (i, el) {
			var $checkboxList = $(this);
			$checkboxList.on("change", "input[type='checkbox']", function (e) {
				updateCheckboxesRequired($(this).parents(".requiredCheckboxList"));
			});

			updateCheckboxesRequired($checkboxList);
		});

		function updateCheckboxesRequired($checkboxList) {
			var $chk = $checkboxList.find("input[type='checkbox']").eq(0),
				cblName = $chk.attr("name"),
				cblNameAttr = "[name='" + cblName + "']",
				$checkboxes = $checkboxList.find("input[type='checkbox']" + cblNameAttr);

			if ($checkboxList.find(cblNameAttr + ":checked").length > 0) {
				$checkboxes.prop("required", false);
			} else {
				$checkboxes.prop("required", true);
			}
		}

	});
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="post.php">
<div>
	Type of report:
</div>
<div>
	<input type="checkbox" id="chkTypeOfReportError" name="label[]" value="Error" required>
	<label for="chkTypeOfReportError">Error</label>

	<input type="checkbox" id="chkTypeOfReportQuestion" name="label[]" value="Question" required>
	<label for="chkTypeOfReportQuestion">Question</label>

	<input type="checkbox" id="chkTypeOfReportFeatureRequest" name="label[]" value="Feature Request" required>
	<label for="chkTypeOfReportFeatureRequest">Feature Request</label>
</div>

<div>
	Priority
</div>
<div>
	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: High" required>
	<label for="chkPriorityHigh">High</label>


	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: Medium" required>
	<label for="chkPriorityMedium">Medium</label>


	<input type="checkbox" id="chkTypeOfContributionLow" name="label[]" value="Priority: Low" required>
	<label for="chkPriorityMedium">Low</label>
</div>
<div>
	<input type="submit" />
</div>
</form>

Ecco un altro semplice trucco 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");
    }
});

Questo è tutto .. questo funziona perché se nessuna delle caselle di controllo è selezionata, nulla per quanto riguarda il gruppo delle caselle di controllo (incluso il suo nome) viene pubblicato sul server

Provare:

self.request.get('sports_played', allow_multiple=True)

o

self.request.POST.getall('sports_played')

Più specificamente:

Quando leggi i dati dall'array della casella di controllo, assicurati che l'array abbia:

len>0 

In questo caso:

len(self.request.get('array', allow_multiple=True)) > 0