Używasz atrybutu „required” HTML5 dla grupy pól wyboru?

W przypadku korzystania z nowszych przeglądarek obsługujących HTML5 (na przykład FireFox 4);
a pole formularza ma atrybut required='required';
a pole formularza jest puste / puste;
i kliknięto przycisk przesyłania;
przeglądarka wykryje, że „wymagane” pole jest puste i nie wysyła formularza;
zamiast tego przeglądarka wyświetla podpowiedź z prośbą o wpisanie tekstu w polu.

Teraz zamiast jednego pola tekstowego mam grupę checkboxów , z których przynajmniej jedno powinno być zaznaczone / wybrane przez użytkownika.

Jak mogę użyć requiredatrybutu HTML5 w tej grupie pól wyboru? (Ponieważ tylko jedno pole wyboru musi być zaznaczone, nie mogę umieścić requiredatrybutu w każdym polu wyboru)

ps. Używam simple_form , jeśli to ma znaczenie.

AKTUALIZACJA

Czy atrybut HTML 5multiple mógłby być tutaj pomocny? Czy ktoś użył go wcześniej do zrobienia czegoś podobnego do mojego pytania?

AKTUALIZACJA

To wydaje się , że ta funkcja nie jest obsługiwana przez specyfikację HTML5: PROBLEM-111: Co robi wejście @ wymagana średnia dla @type = checkbox.?

(Status sprawy : sprawa została oznaczona jako zamknięta bez uprzedzeń ) . A oto wyjaśnienie .

AKTUALIZACJA 2

To stare pytanie, ale chciałem wyjaśnić, że pierwotnym zamiarem pytania była możliwość zrobienia tego bez użycia Javascript - tj. Przy użyciu metody HTML5. Z perspektywy czasu powinienem był bardziej oczywisty uczynić „bez Javascript”.

Niestety HTML5 nie zapewnia tego standardowego sposobu.

Jednak za pomocą jQuery możesz łatwo kontrolować, czy grupa pól wyboru ma co najmniej jeden zaznaczony element.

Rozważ następujący fragment 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>

Możesz użyć tego wyrażenia:

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

która zwraca, truejeśli przynajmniej jeden element jest zaznaczony. Na tej podstawie możesz zaimplementować sprawdzanie poprawności.

To prosta sztuczka. To jest kod jQuery, który może wykorzystać walidację HTML5, zmieniając requiredwłaściwości, jeśli któraś jest zaznaczona. Poniżej znajduje się Twój kod HTML (upewnij się, że dodajesz wymagane dla wszystkich elementów w grupie).

<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

Poniżej znajduje się skrypt jQuery, który wyłącza dalsze sprawdzanie poprawności, jeśli którykolwiek jest wybrany. Wybierz używając elementu nazwy.

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

Mały problem: Ponieważ używasz walidacji HTML5, upewnij się, że wykonałeś ją przed walidacją, tj. Przed przesłaniem formularza.

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

Wydaje mi się, że nie ma standardowego sposobu na HTML5, aby to zrobić, ale jeśli nie masz nic przeciwko użyciu biblioteki jQuery, udało mi się uzyskać walidację „ grupy pól wyboru” przy użyciu grupy „ wymagane przez webshim ” funkcji walidacji :

Dokumenty wymagane przez grupę mówią:

Jeśli pole wyboru ma klasę „wymagana grupa”, przynajmniej jedno z pól wyboru o tej samej nazwie w formularzu / dokumencie musi być zaznaczone.

A oto przykład, jak byś tego użył:

<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" />

Przeważnie używam webshims do wypełniania funkcji HTML5, ale ma też kilka świetnych opcjonalnych rozszerzeń, takich jak to.

Pozwala nawet na pisanie własnych niestandardowych reguł ważności. Na przykład musiałem utworzyć grupę pól wyboru, która nie byłaby oparta na nazwie wejścia, więc napisałem własną regułę ważności dla tego ...

HTML5 nie obsługuje bezpośrednio wymagania, aby tylko jedno / co najmniej jedno pole wyboru było zaznaczone w grupie pól wyboru. Oto moje rozwiązanie wykorzystujące 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 zapewni zaznaczenie co najmniej jednego pola wyboru, a następnie wyłączy całą grupę pól wyboru. Jeśli jedno zaznaczone pole wyboru zostanie odznaczone, będzie wymagać wszystkich pól wyboru ponownie!

Miałem ten sam problem i moje rozwiązanie było takie:

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/

Zainspirowany odpowiedziami @thegauraw i @Brian Woodward, oto fragment, który zebrałem dla użytkowników JQuery, w tym niestandardowy komunikat o błędzie walidacji:

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

Zauważ, że mój formularz ma domyślnie zaznaczone pola wyboru.

Może niektórzy z was kreatorów JavaScript / JQuery mogliby to jeszcze bardziej zaostrzyć?

możemy to łatwo zrobić również z html5, wystarczy dodać trochę kodu jquery

Próbny

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

Dodałem niewidzialne radio do grupy pól wyboru. Gdy przynajmniej jedna opcja jest zaznaczona, radio jest również ustawione na sprawdzanie. Gdy wszystkie opcje są anulowane, radio jest również ustawione na anulowanie. Dlatego w formularzu jest używany komunikat radiowy „Zaznacz przynajmniej jedną opcję”

• Nie możesz użyć display: none ponieważ radio nie może być skupione.
• Sprawiam, że rozmiar radia jest równy całemu rozmiarowi pól wyboru, więc po wyświetleniu monitu jest to bardziej oczywiste.

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/

Cześć, po prostu użyj dodatkowego pola tekstowego do grupy pól wyboru. Po kliknięciu dowolnego pola wyboru umieść wartości w tym polu tekstowym. Upewnij się, że to pole tekstowe jest wymagane i tylko do odczytu.

Zdaję sobie sprawę, że jest tu mnóstwo rozwiązań, ale żadne z nich nie spełniało wszystkich moich wymagań:

• Nie jest wymagane żadne niestandardowe kodowanie
• Kod działa podczas ładowania strony
• Nie są wymagane żadne klasy niestandardowe (pola wyboru lub ich elementy nadrzędne)
• Potrzebowałem kilku list pól wyboru, aby udostępnić to samo namedo przesyłania zgłoszeń na Github za pośrednictwem ich interfejsu API, i używałem nazwy label[]do przypisywania etykiet w wielu polach formularza (dwie listy pól wyboru oraz kilka pól wyboru i pól tekstowych) - przyznano, że mogłem to osiągnąć bez ich udostępniania ta sama nazwa, ale zdecydowałem się spróbować i zadziałało.

Jedynym wymaganiem dla tego jest jQuery. Możesz połączyć to z doskonałym rozwiązaniem @ ewall, aby dodać niestandardowe komunikaty o błędach walidacji.

/* 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>

Oto kolejna prosta sztuczka z użyciem 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");
    }
});

To wszystko ... to działa, ponieważ jeśli żadne pole wyboru nie jest zaznaczone, nic o grupie checkboxów (łącznie z jej nazwą) nie jest wysyłane na serwer

Próbować:

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

lub

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

Dokładniej:

Kiedy czytasz dane z tablicy checkbox, upewnij się, że tablica ma:

len>0 

W tym przypadku:

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