Використовуючи атрибут HTML "обов'язковий" для групи прапорців?

При використанні новіших браузерів, які підтримують HTML5 (наприклад, FireFox 4);
а поле форми має атрибут required='required';
а поле форми порожнє / порожнє;
і натискається кнопка подання;
браузери виявляють, що "обов'язкове" поле порожнє і не подає форму;
натомість браузер показує підказку, в якій просить користувача ввести текст у поле.

Тепер замість одного текстового поля у мене є група прапорців , з яких принаймні один повинен бути перевірений / вибраний користувачем.

Як я можу використовувати requiredатрибут HTML5 для цієї групи прапорців? (Оскільки лише один із прапорців потрібно встановити, я не можу ставити requiredатрибут на кожний прапорець)

пс. Я використовую simple_form , якщо це має значення.

ОНОВЛЕННЯ

Чи може атрибут HTML 5multiple бути тут корисним? Хтось використовував це раніше, щоб зробити щось подібне до мого запитання?

ОНОВЛЕННЯ

Це здається , що ця функція може бути HTML5 специфікації: проблемно-111: Що робить вхід @ потрібна середня для @type = прапорець.?

(Статус випуску: Випуск було позначено закритим без шкоди. ) І ось пояснення .

ОНОВЛЕННЯ 2

Це давнє запитання, але хотілося уточнити, що первісна мета цього питання полягала в тому, щоб можна було робити вищезазначене, не використовуючи Javascript - тобто використовуючи спосіб HTML5. В ретроспективі я мав би зробити "без Javascript" більш загрозливим.

На жаль, HTML5 не забезпечує нестандартного способу зробити це.

Однак, використовуючи jQuery, ви можете легко контролювати, чи група прапорців має принаймні один зареєстрований елемент.

Розглянемо наступний фрагмент 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>

Ви можете використовувати цей вираз:

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

який повертається, trueякщо перевіряється хоча б один елемент. Виходячи з цього, ви можете здійснити перевірку перевірки.

Це простий трюк. Це код jQuery, який може використовувати перевірку html5, змінюючи requiredвластивості, якщо такий перевіряється. Далі йде ваш html-код (переконайтеся, що ви додали необхідні для всіх елементів групи.)

<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

Далі йде сценарій jQuery, який відключає подальшу перевірку перевірки, чи обраний такий. Виберіть за допомогою елемента імені.

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

Невеликий сютч тут: Оскільки ви використовуєте перевірку html5, переконайтеся, що ви виконали це перед тим, як воно буде перевірено, тобто перед подачею форми.

// 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, щоб це зробити, але якщо ви не заперечуєте з використанням бібліотеки jQuery, я зміг досягти перевірки "групи прапорець", використовуючи функцію перевірки " необхідної групи" веб-сайтів :

У документах для необхідних для групи говорять:

Якщо прапорець має клас "обов'язкові для групи", принаймні один з цих прапорців у формі / документі має бути встановлений.

Ось приклад того, як ви його використали:

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

Я здебільшого використовую веб-файли для поліфактування функцій HTML5, але він також має великі додаткові розширення, як це.

Це навіть дозволяє написати власні власні правила дійсності. Наприклад, мені потрібно було створити групу прапорців, яка не грунтувалася на імені вводу, тому я написав для цього власне правило дійсності ...

HTML5 не підтримує безпосередньо, вимагаючи, щоб у групі прапорців було встановлено лише один / принаймні один прапорець. Ось моє рішення за допомогою 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 забезпечить принаймні один прапорець, а потім де-вимагатиме всю групу прапорців. Якщо один прапорець, який перевіряється, не знімається, він знову вимагатиме всі прапорці!

У мене була така ж проблема, і я вирішив таке:

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/

Натхненний відповідями від @thegauraw та @Brian Woodward, ось декілька я зібрав для користувачів JQuery, включаючи спеціальне повідомлення про помилку перевірки:

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

Зауважте, що у моїй формі за замовчуванням встановлено деякі прапорці.

Можливо, деякі з вас майстри JavaScript / JQuery можуть ще більше посилити це?

ми також можемо це легко зробити з html5, просто потрібно додати код 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');
        }
    });
});

Я додав невидиме радіо до групи прапорців. Якщо принаймні одна опція встановлена, радіо також встановлюється для перевірки. Коли всі параметри скасовуються, радіо також встановлюється для скасування. Тому у формі використовується радіо-підказка "Будь ласка, перевірте хоча б один варіант"

• Ви не можете використовувати, display: noneоскільки радіо не може бути зосереджено.
• Я роблю розмір радіо рівним усьому розміру прапорців, тому це стає більш очевидним при запиті.

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/

Привіт просто використовуйте текстове поле, додаткове до групи прапорців. Коли натискаєте будь-який прапорець, введіть значення до цього текстового поля. Зробіть, щоб це текстове поле було потрібно та прочитано тільки.

Я розумію, що тут є маса рішень, але я виявив, що жодне з них не відповідає всім вимогам:

• Не потрібно спеціальне кодування
• Код працює при завантаженні сторінки
• Не потрібні спеціальні класи (прапорці або їх батько)
• Мені потрібно було декілька списків прапорець, щоб поділитися тим самим nameдля надсилання проблем Github через їх API, і я використовував ім'я label[]для присвоєння міток у багатьох полях форм (два списки прапорців та декілька виділених і текстових полів) - надано, я міг би досягти цього без їх обміну однойменне, але я вирішив спробувати, і воно спрацювало.

Єдина вимога до цього - jQuery. Ви можете поєднати це з чудовим рішенням @ ewall, щоб додати спеціальні повідомлення про помилки перевірки.

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

Ось ще один простий трюк за допомогою 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");
    }
});

Ось і все. Це працює, тому що якщо не встановлено жодного з прапорців, нічого не стосується групи прапорців (включаючи її назву) на сервер не розміщується.

Спробуйте:

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

або

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

Більш конкретно:

Коли ви читаєте дані з масиву прапорців, переконайтеся, що масив має:

len>0 

В цьому випадку:

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