1. ホーム
  2. forms

[解決済み】HTML5の "required "属性をチェックボックスのグループに使用する?

2022-04-12 15:27:34

質問

HTML5に対応した新しいブラウザ(例えばFireFox 4)を使用する場合。

という属性があり、フォームフィールドが required='required' ;

で、フォームフィールドは空/空白です。

で、送信ボタンがクリックされた場合。

は、フィールドが空であることを検出し、フォームを送信しません。

その代わり、ブラウザはフィールドにテキストを入力するようユーザーに求めるヒントを表示します。

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

どのようにすれば、HTML5 required 属性は、このチェックボックスのグループに適用されますか? (チェックボックスのうち1つだけをチェックする必要があるため、チェックボックスに required 属性は、すべてのチェックボックスに適用されます。)

ps. 私は シンプルフォーム もしそれが重要なら。


アップデイト

は、もしかして HTML 5 multiple 属性 このような場合、どうすればよいのでしょうか?私の質問と同じようなことをするために、以前にこれを使用した人はいますか?

アップデイト

それは 見える この機能はHTML5仕様でサポートされていないこと。 ISSUE-111: input.@required は @type = checkbox に対してどのような意味ですか?

(課題の状態。 問題は予断を持たずに解決されました。 ) そして 以下はその説明です。 .

アップデイト2

古い質問ですが、質問の本来の意図は、Javascriptを使わずに上記を行えるようにすること、つまりHTML5の方法を使って行うことであることを明確にしたかったのです。振り返ってみると、quot;without Javascript"をもっとはっきりさせるべきでした。

解決方法は?

残念ながら、HTML5では、そのような方法をすぐに使えるわけではありません。

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

次のような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 少なくとも1つの要素がチェックされた場合。 これを元に、バリデーションチェックを実装します。