jQueryでメールフォームのバリデーションを作成する

メールフォームの入力項目に不備があった場合は、バリデーション（検証）をしてエラーメッセージをユーザーに伝える必要があります。
今回は必須項目が未入力の場合を想定してバリデーションを実装します。
まずは下記のメールフォームのサンプルを触ってみてください。送信ボタンはどこにも送信されませんのでご安心ください。

メールフォームのサンプル

上記サンプルでは、送信ボタンをクリックしたタイミングで必須項目に入力がされているのかチェックを行います。
未入力の項目があれば、インプット要素の下にエラーメッセージが表示される仕様となっています。
こちらの実装方法について解説していきます。

HTMLの記述

<form action="">
	<div class="contact-form">
		<dl>
			<dt>お名前<span>必須</span></dt>
			<dd><input class="required" type="text"></dd>
		</dl>
		<dl>
			<dt>メールアドレス<span>必須</span></dt>
			<dd><input class="required" type="email"></dd>
		</dl>
		<dl>
			<dt>お問い合わせ内容</dt>
			<dd><textarea></textarea></dd>
		</dl>
	</div>
	<div class="contact-submit">
		<input type="submit">
	</div>
</form>

HTMLの記述は上記のようになります。
「お名前」と「メールアドレス」を必須項目にしますので、input要素に「class=”required”」を入れてください。
このクラス名のある要素にバリデーションを設定します。

jQueryの記述

$(function(){
	//送信ボタンをクリックしたタイミングで検証
	$('form').on('submit',function(){
		//エラー用の変数を作成
		var error;
		//エラーメッセージを初期化
		$(this).find('.error').remove();

		//必須項目の検証
		$(this).find('.required').each(function(){
			if($(this).val() === ""){
				//値が取得できない場合はエラーを返す
				error = true;
				//値が取得できない場合はエラーメッセージを表示
				$(this).after('<span class="error">未入力です</span>');
			}
		});

		//送信ボタンの制御
		if(error){
			return false;
		}
	});
});

送信ボタンをクリックしたタイミングで検証を行うので、最初に「$(‘form’).on(‘submit’・・・」という記述から開始します。

次に必須項目の検証を行いますので「$(this).find(‘.required’).each・・・」の箇所から、未入力の要素をチェックをします。

未入力の場合は、変数「error」に「true」を格納します。
そしてinput要素の下に「<span class=”error”>未入力です</span>」というHTMLコードを追記します。
このコードを追記することでエラーメッセージが表示されます。

最後の「if(error・・・」の箇所では、未入力のままフォームが送信されないように制御しています。

以上。メールフォームのバリデーション方法についてご紹介しました。
よかったら参考にしてみてください。