html5でチェックボックスを必須項目にするには

最初にラジオボタンで必須項目にするとき、html5で簡単に書けます。

よくアンケートでこのような項目がありますが、

<label><input type="radio" name="example" value="はい" required>はい</label>
<label><input type="radio" name="example" value="いいえ">いいえ</label>
<label><input type="radio" name="example" value="どちらでもない">どちらでもない</label>

下記はサンプルです。どこにも飛びません。




というように、書くことができます。では、チェックボックスが複数項目あるとき同じように書くとどうなるでしょうか。

<label><input type="checkbox" name="example" value="野球" required>野球</label>
<label><input type="checkbox" name="example" value="サッカー">サッカー</label>
<label><input type="checkbox" name="example" value="どちらでもない">どちらでもない</label>



これ、実はうまくいきません。(ちなみに、飛び先はyahooにしています。)

野球だけは絶対にチェックしないといけないような仕様になってしまいます。

同意書のようなものであれば、選択項目一つで、絶対にチェックさせるというのには使えるのですが、複数項目でのバリデーションには使えません。

そこで、どうするのか。jQuery-Validation-Engineを使います。詳しい説明はこちらに書いてあります。

クライアント側の処理はクライアント側で値を勝手に書き換えることができるので、
ちゃんと、サーバー側でも値のチェックはしましょう。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

WP-SpamFree by Pole Position Marketing