jsでメールフォームのリアルタイムバリデーション制作


メールフォームのバリデーションをする時、値の判定をリアルタイムで行ってくれるjsのバリデーションを制作してみました。

リアルタイムバリデーションの要件定義

リアルタイムというのはinputの項目からフォーカスを外した時に値をチェックしてくれるということです。

各フォーム項目のバリデーション実行タイミングはinput要素からフォーカスが外れた時、またはセレクトやラジオボタンの値が変更された時となります。

そして、フォームデータが送信されるのも全ての内容にエラーが存在しなかった時にのみ送信される仕組みとなっています。

HTMLで基本的なフォームを制作

フォームの要素はよく使う基本的なものを利用しています。要素の下にエラーメッセージを予め準備しCSSで非表示において、バリデーションでチェックでエラー判定の時、エラーメッセージが表示されます。

<form name="mailform" action="confirm.php" method="POST">  
	
	<table>
		<tbody>
			<tr>
				<th>名前(必須)</th>
				<td class="js-text-require">
					<input type="text" name="name" value="" maxlength="100" placeholder="名前">
					<div class="error">名前を正しく入力してください。</div>
				</td>
			</tr>
			<tr>
				<th>メールアドレス(必須)</th>
				<td class="js-email-require">
					<input type="email" name="mail" value="" maxlength="100" placeholder="メールアドレス">
					<div class="error">メールアドレスを正しく入力してください。</div>
				</td>
			</tr>
			<tr>
				<th>電話番号(必須)</th>
				<td class="js-phone-require">
					<input type="tel" name="phone" value="" maxlength="100" placeholder="電話番号">
					<div class="error">電話番号を正しく入力してください。</div>
				</td>
			</tr>
			<tr>
				<th>ラジオボタン(必須)</th>
				<td class="js-radio-require">
					<label>
						<input type="radio" name="radio-sample" value="ラジオサンプル1">ラジオサンプル1
					</label>
					<label>
						<input type="radio" name="radio-sample" value="ラジオサンプル2">ラジオサンプル2
					</label>
					<label>
						<input type="radio" name="radio-sample" value="ラジオサンプル3">ラジオサンプル3
					</label>
					<div class="error">ラジオボタンを選択してください。</div>
				</td>
			</tr>
			<tr>
				<th>チェックボックス(必須)</th>
				<td class="js-checkbox-require">
					<label>
						<input type="checkbox" name="checkbox-sample[]" value="チェックサンプル1">チェックサンプル1
					</label>
					<label>
						<input type="checkbox" name="checkbox-sample[]" value="チェックサンプル2">チェックサンプル2
					</label>
					<label>
						<input type="checkbox" name="checkbox-sample[]" value="チェックサンプル3">チェックサンプル3
					</label>
					<div class="error">チェックボックスを選択してください。</div>
				</td>
			</tr>
			<tr>
				<th>セレクトボックス(必須)</th>
				<td class="js-select-require">
					<select name="select-sample">
						<option></option>
						<option>セレクトサンプル1</option>
						<option>セレクトサンプル2</option>
						<option>セレクトサンプル3</option>
					</select>
					<div class="error">セレクトボックスを選択してください。</div>
				</td>
			</tr>
			<tr>
				<th>本文</th>
				<td class="js-content-limit">
					<textarea name="content" cols="30" rows="10" maxlength="200" placeholder="本文"></textarea>
					<div class="error">文字数をオーバーしています。</div>
				</td>
			</tr>
		</tbody>
	</table>
	<button class="btn" type="submit" value="送信">送信</button>
</form>

javascriptで入力内容のチェック

ここではjQueryでjsを記述しています。まずは要素に合わせて関数を一づつ制作します。文字数の制限と、型が一致するかどうかを正規表現で制作します。

指定した内容と一致しない要素があればエラーメッセージのclassがonとなり、メッセージ表示されます。

後で使うので、すべての関数をまとめて実行するための、batch_execution()という関数も作っておきます。

// input[type="text"]のバリデーション
function text_require(_this) {
	if(_this.val().length > 200 || _this.val() == ''){
		_this.next('.error').addClass('on');
	} else {
		_this.next('.error').removeClass('on');	
	}
}

// メールフォームのバリデーション
function mail_validate(_this){
	if(_this.val().length > 200 || _this.val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/) == null){
		_this.next('.error').addClass('on');
	} else {
		_this.next('.error').removeClass('on');
	}
}

// 電話番号のバリデーション
function phone_validate(_this){
	if(_this.val().match(/^[0-9]+$/) == null){
		_this.next('.error').addClass('on');
	} else {
		_this.next('.error').removeClass('on');
	}
}

//チェックボックスのバリデーション
function check_require(_this) {
	var check_require = _this.parents('td.js-checkbox-require').find('input[type="checkbox"]:checked').length
	if(check_require > 0){
		_this.parents('td.js-checkbox-require').children('.error').removeClass('on');
	} else {
		_this.parents('td.js-checkbox-require').children('.error').addClass('on');
	}
}

//ラジオボタンのバリデーション
function radio_require(_this) {
	var radio_require = _this.parents('td.js-radio-require').find('input[type="radio"]:checked').length
	if(radio_require > 0){
		_this.parents('td.js-radio-require').children('.error').removeClass('on');
	} else {
		_this.parents('td.js-radio-require').children('.error').addClass('on');
	}
}

//セレクトのバリデーション
function select_require(_this) {
	var select_require = _this.val();
	if(select_require == false){
		_this.parents('td.js-select-require').children('.error').addClass('on');
	} else {
		_this.parents('td.js-select-require').children('.error').removeClass('on');
	}
}


//本文の文字数制限
function content_limit(_this) {
	if(_this.val().length > 200){
		_this.next('.error').addClass('on');
	} else {
		_this.next('.error').removeClass('on');	
	}
}

/*-----------------------------------
/* 各種関数のまとめ
 -----------------------------------*/
function batch_execution() {
	text_require($(".js-text-require input[type=text]"));
	mail_validate($(".js-email-require input[type=email]"));
	phone_validate($(".js-phone-require input[type=tel]"));
	check_require($(".js-checkbox-require input[type=checkbox]"));
	radio_require($(".js-radio-require input[type=radio]"));
	select_require($(".js-select-require select"));	
}

上の関数を実行するタイミングを一つづつセットしていきます。

フォーカスが外れ時に実行されるのがblurで要素が変更された時が実行されるのがchangeとなります。

最後に送信ボタンを押された時、すべての関数をまとめて実行し、onになっているエラーメッセージが存在する場合、内容を送信させないようにしてjsのバリデーションは完成です。

/*-----------------------------------
 * 処理の実行
 -----------------------------------*/
$(function(){
	/**
	 * バリデーションの実行タイミング
	 */
	$('.js-text-require input[type="text"]').blur(function(){
		text_require($(this));
	});
	
	$('.js-email-require input[type="email"]').blur(function(){
		mail_validate($(this));
	});
	
	$('.js-phone-require input[type="tel"]').blur(function(){
		phone_validate($(this));
	});
	
	$('.js-checkbox-require input[type="checkbox"]').on('change', function(){
		check_require($(this));
	});
	
	$('.js-radio-require input[type="radio"]').on('change', function(){
		radio_require($(this));
	});
	
	$('.js-select-require select').on('change', function(){
		select_require($(this));
	});
	
	$('.js-content-limit textarea').blur(function(){
		content_limit($(this));
	});
	
	
	/**
	 * エラーがある場合submitのを止める
	 */
	$('[name="mailform"]').submit(function() {
		batch_execution();
		if( $('.error.on').length > 0) {
			return false
		}
	});
});

ここで制作したjsのバリデーションは、postする前のチェックしかおこなっていませんので、セキュリティ的には問題ありのフォームです。

悪意のある攻撃を仕掛けてくる人は、入力フォームを介さず直接postデータを送ってきたりするので、javascriptのバリデーションなんて無意味なのです。ユーザーの使いやすさ向上という意味では有効ですが。

実際にpostされたデータチェックするたのphpによるバリデーションも制作は必須なので、次回そちらのサンプルも公開していきます。

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら