web-dev-qa-db-ja.com

チェックボックスのグループにHTML5の「必須」属性を使用していますか？

HTML5（FireFox 4など）をサポートする新しいブラウザーを使用する場合;
およびフォームフィールドには属性required='required'があります。
フォームフィールドが空/空白です。
そして送信ボタンをクリックします;
ブラウザは、「必須」フィールドが空であることを検出し、フォームを送信しません。
代わりに、ユーザーにフィールドにテキストを入力するように求めるヒントが表示されます。

さて、単一のテキストフィールドの代わりに、チェックボックスのグループがあります。そのうち少なくとも1つはユーザーがチェック/選択する必要があります。

このグループのチェックボックスでHTML5 required属性を使用するにはどうすればよいですか？ （チェックボックスの1つだけをチェックする必要があるため、すべてのチェックボックスにrequired属性を配置することはできません）

追伸私は simple_form を使用しています。

UPDATE

HTML 5 multiple属性 はここで役立つでしょうか？誰かが私の質問に似たようなことをするために以前にそれを使用しましたか？

更新

それはが表示されますこの機能はHTML5仕様ではサポートされていません：ISSUE-111 ：input。@ requiredは@type = checkboxで何を意味しますか？

（問題のステータス：問題は、先入観なしに閉じられたとマークされています。）そして ここに説明があります 。

更新2

これは古い質問ですが、質問の本来の目的は、Javascriptを使用せずに上記を実行できるようにすること、つまりHTML5の方法を使用することであったことを明確にしたかったのです。振り返ってみると、「Javascriptなし」をもっと曖昧にするべきでした。

formshtml5validationcheckbox
143
Zabba

残念ながら、HTML5には、すぐに使用できる方法はありません。

ただし、jQueryを使用すると、チェックボックスグループに少なくとも1つのチェックされた要素があるかどうかを簡単に制御できます。

次の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

少なくとも1つの要素がチェックされている場合、trueを返します。それに基づいて、検証チェックを実装できます。

65
Luca Fagioli

その簡単なトリック。これは、requiredプロパティのいずれかがチェックされている場合に変更することにより、html5検証を活用できるjQueryコードです。 HTMLコードは次のとおりです（グループ内のすべての要素にrequiredを追加してください）。

<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
});
13
thegauraw

これを行うための標準的なHTML5の方法はないと思いますが、jQueryライブラリの使用を気にしないのであれば、 webshims '" groupを使用して「チェックボックスグループ」検証を達成できました。 -required "検証機能：

group-requiredのドキュメント 言います：

チェックボックスのクラスが「group-required」の場合、フォーム/ドキュメント内の同じ名前のチェックボックスの少なくとも1つをチェックする必要があります。

そして、これをどのように使用するかの例を示します。

<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
Tyler Rick

HTML5は、チェックボックスグループで1つ以上のチェックボックスのみをチェックすることを直接サポートしていません。 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

ジャバスクリプト

       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つのチェックボックスがオンになっていることを確認してから、チェックボックスグループ全体を必要としません。チェックされている1つのチェックボックスがオフになっている場合、すべてのチェックボックスが再び必要になります！

7
Brian Woodward

私は同じ問題を抱えていて、私の解決策はこれでした：

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/

3
Passalini

@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
ewall

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

こんにちは、チェックボックスのグループに追加するテキストボックスを使用します。チェックボックスをクリックすると、そのテキストボックスに値が入力されます。そのテキストボックスは必須で読み取り専用にします。

1
Abijith

目に見えないラジオをチェックボックスのグループに追加しました。少なくとも1つのオプションがチェックされると、ラジオもチェックするように設定されます。すべてのオプションがキャンセルされると、ラジオもキャンセルに設定されます。したがって、フォームはラジオプロンプト「少なくとも1つのオプションを確認してください」を使用します。

  • ラジオの焦点を合わせることができないため、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/

0
Codus