![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?c9bd177)
HTML5でformのグループ化されたselectを必須にしたいと思い、
下記のようにrequiredを記述しました。
<select name="sample[]" required>
<option value="">--</option>
<optgroup label="カテゴリA">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
</optgroup>
<optgroup label="カテゴリB">
<option value="3">選択肢3</option>
</optgroup>
</select>
そうすると、選択肢1を選択していても「必須項目です」と表示され、フォームが送信できません。
valueの値が1だと選択済として扱われないのでしょうか。
optgroupをなくすと選択肢1を選択した状態で送信できました。
valueの値は1で送信したいのですが、可能でしょうか。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
selectのrequiredオプションは、
【引用】____________ここから
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.10 Forms — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/form … )]より
・multiple属性が指定されていないこと
・size(表示サイズ)が 1 であること
・option 要素の値が空文字列であること
・その option 要素の親ノードが select 要素であること
★optgroupはダメ
と書かれています。よって送信されるはずです。
<select name="sample[]" required>
<option value="">選択してください。</option>
<optgroup label="カテゴリA">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
</optgroup>
<optgroup label="カテゴリB">
<option value="3">選択肢3</option>
</optgroup>
</select>
なお、IE8以前のものは、requiredオプションが無効ですので、javascriptで判断すると同時に、CGI側での処理をする必要があります。
⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
などで文法チェックをしてみたら??
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数列を持ったリストボックス...
-
URLを携帯に送信させる
-
【プルダウンで選んでGOボタン...
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
Application.ScreenUpdating = ...
-
この英語はどういう意味ですか?
-
ACCESS テキストボックスを隙...
-
JSONで文字列が長い時
-
pythonの*
-
Perlにおける<?phpinfo();?>の...
-
phpでボタンを押したときに変数...
-
【至急!!!】python言語で本を見...
-
I2C接続のLCDディスプレイを使う
-
問題作成のWebアプリの作り方を...
-
自作関数への値の渡し方@_
-
FindFirst を複数条件で検索
-
どちのほうがすきですか?
-
実行時エラー 3020の対策
-
ソースの詳細を教えてください。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
セレクトメニューで2つの項目...
-
<SELECT>タグの折り返し
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
複数列を持ったリストボックス...
-
optionのselectedは更新時は効...
-
プルダウンリストの背景色の指定
-
selectタグ内の特定のoptionの...
-
同じものを繰り返し表示させる
-
セレクトボックスから別窓にジ...
-
セレクトボックスの「選択して...
-
セレクトボックスの中を一部隠...
-
SELECT要素の垂直位置
-
セレクトボックスである項目を...
-
select や option のCSS設定
-
SELECT OPTIONの中身をコピペ...
-
セレクトメニューで選んだ値を...
-
html select optionが左寄せに...
-
プルダウンメニューがプルアップに
おすすめ情報