【HTML5】selectにrequierd

質問

HTML5でformのグループ化されたselectを必須にしたいと思い、
下記のようにrequiredを記述しました。

<select name="sample[]" required>
<option value="">--</option>
<optgroup label="カテゴリA">
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
</optgroup>

<optgroup label="カテゴリB">
<option value="3">選択肢３</option>
</optgroup>
</select>

そうすると、選択肢１を選択していても「必須項目です」と表示され、フォームが送信できません。
valueの値が1だと選択済として扱われないのでしょうか。

optgroupをなくすと選択肢１を選択した状態で送信できました。

valueの値は1で送信したいのですが、可能でしょうか。

回答No.1

ORUKA1951

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/forms.html#attr-select-required )］より
・multiple属性が指定されていないこと
・size(表示サイズ)が 1 であること
・option 要素の値が空文字列であること
・その option 要素の親ノードが select 要素であること
　★optgroupはダメ
と書かれています。よって送信されるはずです。
　<select name="sample[]" required>
　　<option value="">選択してください。</option>
　　<optgroup label="カテゴリA">
　　　<option value="1">選択肢１</option>
　　　<option value="2">選択肢２</option>
　　</optgroup>
　　<optgroup label="カテゴリB">
　　　<option value="3">選択肢３</option>
　　</optgroup>
　</select>
なお、IE8以前のものは、requiredオプションが無効ですので、javascriptで判断すると同時に、CGI側での処理をする必要があります。

　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
などで文法チェックをしてみたら？？