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


172

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

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

Как я могу использовать requiredатрибут HTML5 для этой группы флажков? (Поскольку необходимо установить только один из флажков, я не могу поставить requiredатрибут на каждый флажок)

пс. Я использую simple_form , если это имеет значение.


ОБНОВИТЬ

Может ли атрибут HTML 5multiple быть полезным здесь? Кто-нибудь использовал это раньше, чтобы сделать что-то похожее на мой вопрос?

ОБНОВИТЬ

Это кажется , что эта функция не поддерживается HTML5 спецификации: проблемно-111: Что делает вход @ требуется среднее для @type = флажок.?

(Статус проблемы: проблема была помечена как закрытая без ущерба. ) И вот объяснение .

ОБНОВЛЕНИЕ 2

Это старый вопрос, но он хотел уточнить, что первоначальная цель этого вопроса состояла в том, чтобы иметь возможность сделать вышеупомянутое без использования Javascript - то есть с использованием способа HTML5. Оглядываясь назад, я должен был сделать «без Javascript» более абсурдным.


4
Это отличный вопрос, и он применяется к любому вводу формы, который является массивом (включая ввод текста), где вы хотите иметь хотя бы один элемент со значением или отмечен (но не какой-либо конкретный). Демо Я думаю, что не может быть способа сделать это, но я надеюсь, что есть. (Кстати, неважно, на каком языке, на каком фреймворке или в какой-либо библиотеке, это строго HTML5)
Уэсли Мёрч,

Спасибо за добавление этой демонстрации JSFiddle. Надеюсь, есть какой-то HTML5-способ сделать это, иначе, возможно, придется свернуть какое-то решение, используя JQuery и скрытое поле или что-то в этом роде.
Забба

Если вы хотите вернуться к javascript (и вы используете jQuery), не нужно ничего «сворачивать», используйте проверенный плагин проверки: bassistance.de/jquery-plugins/jquery-plugin-validation
Wesley Murch

5
@natedavisolds, я бы сказал, что использование полезно в некоторых интерфейсах - IMO, выбор нескольких флажков более понятен для конечного пользователя, особенно когда число флажков мало, а не щелчок + выбор, как в случае с окно множественного выбора.
Забба

1
Как примечание: вам не нужен весь бит required = 'required'; достаточно просто указать «требуется».
Уильям

Ответы:


85

К сожалению, 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если хотя бы один элемент проверен. Исходя из этого, вы можете реализовать проверку.


@Clijsters вопрос о том, как это сделать в HTML5, а не в Javascript (конечно, в Javascript возможны различные решения)
Zabba

6
@ Zabba Но этот ответ говорит. как сделать это в html5, написав, к сожалению, HTML5 не предоставляет
Clijsters

Достаточно справедливо @Clijsters
Забба

18

Это простой трюк. Это код 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
});

Хотя это можно сделать через Javascript, я искал решение без использования Javascript.
Забба

3
Я думаю, что это лучший ответ на данный момент. Да, он использует JavaScript, но использует проверку HTML5 вместо всплывающего предупреждения JavaScript. Другие ответы используют JS и всплывающее окно JS.
Круз Нуньес

1
Это действительно хорошо. Убедитесь, что выбрали одну или другую в этих первых двух строках jQuery (вторая отменяет первую). Также убедитесь, что вы изменили «option» на имя опции.
Аллен Гингрич

Учитывая, что это не поддерживается изначально в HTML5, это действительно должен быть принятый ответ! Я не хочу реализовывать свою собственную библиотеку проверки только для одного набора полей-флажков в одной форме на моем сайте.
Джеймс Энтони Уилсон

11

Я думаю, что нет стандартного 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, но у него также есть несколько замечательных дополнительных расширений, подобных этому.

Это даже позволяет вам писать свои собственные правила валидации. Например, мне нужно было создать группу флажков, которая не была бы основана на имени входа, поэтому я написал для этого собственное правило валидности ...


11

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 будет гарантировать, что будет установлен хотя бы один флажок, а затем потребует всю группу флажков. Если один флажок, который отмечен, становится не отмеченным, то для него снова потребуются все флажки!


Очень хорошее и чистое решение. Желание может дать больше, чем +1 голос.
Сонал

Договорились @Sonal! Спасибо за это решение Брайан!
НораКСакал

3

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

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/


2

Вдохновленный ответами @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, могли бы еще больше усилить это?


2

мы можем сделать это легко с 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');
        }
    });
});

2

Я добавил невидимое радио в группу флажков. Если выбран хотя бы один параметр, радио также устанавливается на проверку. Когда все параметры отменены, радио также настроено на отмену. Поэтому в форме используется радио-подсказка «Пожалуйста, отметьте хотя бы один вариант»

  • Вы не можете использовать, 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/


Это отличное решение. Работает как шарм. Тем не менее, в Firefox, я получаю большой красный контур вокруг поля переключателя, когда он установлен на всех элементах управления формы, использующих этот переключатель. Есть ли способ придать стилю контур, чтобы он не был красным, если он недействителен (переключатель не отмечен, когда требуется), кроме случаев, когда пользователь нажимает кнопку отправки и выполняется проверка?
gib65

Мы можем установить radios opacityв 0 и установить opacityв 1 при отправке, чтобы мы могли контролировать, появляется красный контур или нет.
Код

Это решение гениально! В моем случае это не сработало, если я использую один из них visibility: hiddenили display: noneпросто чтобы не испачкать удобство использования. Потому что программы чтения с экрана и другие специальные инструменты, вероятно, найдут скрытую кнопку-переключатель.
хорайдер

1

Привет, просто используйте текстовое поле дополнительно к группе флажков. При нажатии на любой флажок введите значения в это текстовое поле. Сделайте так, чтобы это текстовое поле было обязательным и доступно только для чтения.


0

Я понимаю, что здесь есть масса решений, но я обнаружил, что ни одно из них не соответствует всем моим требованиям:

  • Не требуется пользовательское кодирование
  • Код работает при загрузке страницы
  • Не требуется пользовательских классов (флажки или их родитель)
  • Мне нужно было несколько списков флажков, чтобы поделиться одним и тем же 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>


-1

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

Вот и все .. это работает, потому что, если ни один из флажков не установлен, ничего относительно группы флажков (включая ее имя) не публикуется на сервере


-1

Пытаться:

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

Не могли бы вы подробнее остановиться на вашем ответе?
20

когда вы читаете данные из массива флажков, убедитесь, что массив имеет len> 0 в этом случае: len (self.request.get ('array', allow_multiple = True))> 0
Gjison Giocf

Пожалуйста, отредактируйте ваш вопрос, используя информацию в вашем комментарии выше, и я буду рад удалить понижающий голос.
20

Спасибо за редактирование вашего поста, но немного вежливости будет уместно.
20

кажется совершенно не связанным с этим вопросом. Спрашивает о проверке HTML, и решение здесь - это Python. Вопрос даже не касается проверки на стороне сервера, а в том, что есть способ проверить группы флажков, чтобы проверить, установлен ли хотя бы 1.
Октавиоаму
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.