Используете атрибут HTML5 «обязательный» для группы флажков?

При использовании более новых браузеров, поддерживающих 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, который отключает дальнейшую проверку проверки, если какой-либо из них выбран. Выберите, используя элемент 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);
}

Небольшое замечание: поскольку вы используете проверку 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, я смог добиться проверки « группы флажков » с помощью функции проверки webshims « group-required »:

В документах для требуемых для группы говорят:

Если флажок имеет класс 'group-required', то по крайней мере один из флажков с тем же именем внутри формы / документа должен быть отмечен.

И вот пример того, как вы бы это использовали:

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

В основном я использую webshims, чтобы заполнить функции 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')

Более конкретно:

Когда вы читаете данные из массива checkbox, убедитесь, что массив имеет:

len>0 

В таком случае:

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