[解決済み】HTML5の "required "属性をチェックボックスのグループに使用する?
質問
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つの要素がチェックされた場合。
これを元に、バリデーションチェックを実装します。
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] HTML5の数値入力のスピンボックスを非表示にすることはできますか?
-
[解決済み] 電子メールアドレスに使用できる文字は何ですか?
-
[解決済み] HTML5フォームの必須属性。カスタムバリデーションメッセージを設定しますか?
-
[解決済み】curlを使用してmultipart/form-dataをPOSTする正しい方法は何ですか?
-
[解決済み] AngularJSでフォームが無効なときに送信ボタンを無効にする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 使用用途
-
[解決済み] 無料または手頃な価格のOCRおよびICR(手書き文字認識)SDK?[クローズド]
-
[解決済み】GETメソッドとPOSTメソッドはいつ使うべきですか?両者の違いは何ですか?
-
[解決済み】チェックしたラジオボタンのラベルをCSSセレクタで指定する方法
-
[解決済み] AngularJSでフォームの入力を条件付きで要求するにはどうすればよいですか?
-
[解決済み】curlを使用してmultipart/form-dataをPOSTする正しい方法は何ですか?
-
[解決済み] AngularJSでフォームが無効なときに送信ボタンを無効にする
-
[解決済み] 送信」ボタンを無効にするには?
-
[解決済み] HTML5 の input type="text" と input type="search" の比較
-
[解決済み] Razorで "Html.BeginForm "を記述する方法