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

Ответ 1

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

Ответ 2

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

Ответ 3

Я предполагаю, что нет стандартного способа HTML5 для этого, но если вы не возражаете использовать библиотеку jQuery, мне удалось выполнить проверку "checkbox group" с помощью webshims "требуется группа ":

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

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

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

<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 для polyfill функций HTML5, но у него также есть несколько дополнительных дополнительных расширений, подобных этому.

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

Ответ 4

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

Ответ 5

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

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/

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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