- Web制作ネタ帳
writer / せんせー
jQueryでメールフォームのバリデーションをしてみよう
こんにちは、せんせーです。
何かネタないかなーと思って過去のブログを振り返ってみると、jQueryの記事が第3回で終わってたので、これを引き継いでみようかと思います。
今回のテーマは「フォームのバリデーション」です。基礎の文法はなんとなくわかってるレベル向けの内容になっています。
バリデーションとは
さて、そもそもですが「バリデーション」というのは、ある事柄が適切であるかどうかをチェックする仕組みのことです。
お問い合わせフォームなどで必須項目が入力されていないときに赤くなって教えてくれたりするアレのことですね。
もちろん不正な入力を抑止する意味もありますが、今回はあくまで入力ミスをチェックしてフォームの使い心地をよくするためのものという観点から考えていきたいと思います。
なのでセッションがなんやかんやとかJS無効化されてたらどうするのとかそういうのはナシです。
どのタイミングでチェックする？
まず、いつバリデーションを走らせたらいいか考えてみましょう。
おおまかにいうと
- 送信ボタンを押したとき
- 次の入力項目に移ったとき
一般的にはこの2パターンでしょうか。
パスワードの整合性チェックなど、1文字入力するたびにやる場合もありますね。
送信ボタンを押したときにチェックする場合は、submitイベントを監視します。
js
$('form').on('submit', function() {
var error; // エラー用の変数を定義
if ( error ) {
// エラーが見つかった場合
【エラーメッセージを表示する処理】
return false;
} else {
// エラーがなかった場合
return true;
}
});例えばこんな感じです。
そのフォームから送信ボタンが押されるのを監視しておいて、エラーが出たらfalseを返して送信を中断させます。
エラーがなければそのまま送信します。
入力欄を移ったときのチェックにするなら、こんな風になります。
セレクタがinputになり、submitではなくblurイベントにセットするようにします。
js
$('input').on('blur', function() {
var error; // エラー用の変数を定義
if( error ) {
// エラーが見つかった場合
【エラーメッセージを表示する処理】
} else {
// エラーがなかった場合
【エラーメッセージを消去する処理】
}
});送信時にチェックする場合はフォーム全体、入力項目が移ったときにチェックするならinput要素ひとつひとつを見ていく感じですね。
※blurというのはフォーカスが外れたときに発生するイベントです。クリックやタブキーで別の入力欄に移ったとき、移る前にフォーカスしていた要素に発生します。
これは、どっちのタイミングが正解というわけではないので、どこでエラーを教えてあげたら親切かな？ということを考えて適宜実装したいところですね。
どのタイミングでチェックする？
で、今回はとりあえず、入力項目が移ったときにチェックするパターンでやってみたいと思います。
特に複雑な条件は設定せず、必須項目のinput要素になにも入力せず通り過ぎてしまった場合を想定します。
HTMLはこんな感じになっているものとしましょう。
HTML
<form>
<ul>
<li>会社名(必須)：<input type="text" name="company" class="required"></li>
<li>部署名：<input type="text" name="dept"></li>
<li>担当者(必須)：<input type="text" name="name" class="required"></li>
<li>お問い合わせ内容：<br>
<textarea name="message"></textarea></li>
<li><input type="submit"></li>
</ul>
</form>「会社名」と「担当者」を必須項目にしてみました。
この場合requiredクラスをもつinput要素に対してバリデーションをかければいいわけですね。
さっそく書いてみましょう。
入力欄を移ったときのチェックにするなら、こんな風になります。
セレクタがinputになり、submitではなくblurイベントにセットするようにします。
js
$('input.required').on('blur', function() {
var error; // エラー用の変数を定義
if( $(this).val() === '' ) { // この要素のvalueが空文字だったらエラー
error = true;
}
if( error ) {
// エラーが見つかった場合
$(this).after('未入力です'); // この要素の後にエラーメッセージを挿入
} else {
// エラーがなかった場合
$(this).next('span.error').remove(); // この要素の後続要素を削除
}
});エラーメッセージの表示と消去はできたっぽい感じです。
でもこれだと別の入力欄と行ったりきたりするたびエラーメッセージが増殖していくはずなので、すでにメッセージが出てる場合は追加しないようにしておきます。
js
$('input.required').on('blur', function() {
var error; // エラー用の変数を定義
if( $(this).val() === '' ) { // この要素のvalueが空文字だったらエラー
error = true;
}
if( error ) {
// エラーが見つかった場合
if( !$(this).next('span.error').length ) { // この要素の後続要素が存在しない場合
$(this).after('<span class="error">未入力です</span>'); // この要素の後にエラーメッセージを挿入
}
} else {
// エラーがなかった場合
$(this).next('span.error').remove(); // この要素の後続要素を削除
}
});エラーが見つかった場合にさらに条件分岐をかけて、すでにエラーメッセージが表示されているかどうかを見ます。lengthはその要素の数を取得しますが、0個ならfalse評価になるのでその要素が存在するかどうかの判断に使うことができます。
これで未入力の項目の下にエラーメッセージを出す処理ができました。
まあ実際には送信時のチェックも合わせてやったり、電話番号として正しい形になっているか調べたり、入力内容に応じてエラーメッセージを変えたり、もう少し複雑な実装になりますよね。
正直めんどくさいしそういうプラグインも出回ってるので自分でイチから全部組むことはそんなにないかもしれません。
とはいえjQueryの記述練習としてはちょうどいい題材じゃないかと思います。
理屈がわかればいろいろ応用が効くので、ちょっとした処理なら自分で書けるようになりたいなーという人はチャレンジしてみてもいいんじゃないでしょうか。
DEMO
必須項目が空の状態で、違う場所にフォーカスを移すとエラーメッセージが出るサンプルです。
※送信ボタンを押してもどこにも送信されません。
