jQueryでフォームチェックをするときのメモまとめ

毎度の事ですが、Javascriptでメールフォームなどのチェックを実装する場合に、
「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。
分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。

困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。

最近ではjQueryの組み込みがデフォルトになってきたので、サンプルはjQueryベースとなっています。ここでjQueryの使い方についての詳細は省きます。

テキストボックスの入力必須チェック

このようなテキストボックスがある場合

<input type="text" name="hogehoge" value="" />

以下のよう値が空かどうかを判定することで、必須チェックを行います。

if($('form input[name="hogehoge"]').val() == ''){
	alert('値を入力してください');
	return false;
}

チェックボックスにチェックが入っているかチェック

「hogehoge[]」というname属性のチェックボックスを3つ設置したと仮定します。

<input type="checkbox" name="hogehoge[]" />選択肢１
<input type="checkbox" name="hogehoge[]" />選択肢２
<input type="checkbox" name="hogehoge[]" />選択肢３

チェックボックスにチェックが入っているかどうかは「attr(‘checked’)」で判定できます。

if(!$('form input[name="hogehoge[]"]').eq(0).attr('checked') &&
	!$('form input[name="hogehoge[]"]').eq(1).attr('checked') &&
	!$('form input[name="hogehoge[]"]').eq(2).attr('checked')){
	alert('最低でも１つはチェックを入れてください');
	return false;
}

上記では、3つのチェックボックスのうち、1つでもチェックが入っているかどうかを判定しています。
name属性が同名の要素を指定する場合、jQueryだと上記のように「eq(0)」で指定することができます。

【おまけ】エラー項目にフォーカスをあてる

フォーカスとは、フォームの項目を選択した状態にする、マウスで項目をクリックした状態にすることをいいます。
エラーが発生した場合に、該当する項目にフォーカスをあてれば、ユーザはどの項目に入力誤りがあったのか瞬時に知ることができます。

if($('form input[name="hogehoge"]').val() == ''){
	$('form input[name="hogehoge"]').focus();
	alert('値を入力してください');
	return false;
}

エラーメッセージが表示される直前に、フォームにフォーカスをあててあげるとユーザに親切な印象を与えます。