WEBを駆使した売上UP/トータルサポートを提供　
株式会社パルムゲート

前回作成したカウントダウンに続き、今回は JavaScript で入力欄の簡単なバリデーション機能を実装してみた。

この機能を利用することにより、フォーム送信前に個別にバリデーションを行うことが可能になる。従って、(入力項目が多いフォームの場合など) 使う場面によってはユーザビリティの向上が期待できる。

サンプルコードは以下の通り。

// jQuery に自作バリデーション用メソッド validate を追加する
$.fn.extend({
	validate: function () {	// jQuery に validate() メソッドを追加する
		var ret = true;
		var errors = false;
		var rule = $(this).attr('data-validation-rule');
		$(this).removeClass('form-error').removeAttr('title');
		$(this).siblings('.error_msg').text('');
		if ( rule )
		{
			// バリデーションルールがあった場合の処理
			var allowEmpty = $(this).attr('data-validation-allow-empty');
			var same_as = $(this).attr('data-validation-same-as');
			var msg = $(this).attr('data-validation-error-message');
			var set_error = function (jqobj, msg) {
				jqobj.addClass('form-error').attr('title', msg);
				if ( (err_msg=jqobj.siblings('.error-message')).length > 0 )
				{
					err_msg.text(msg);	// error-message クラスのコンテナが存在していればそこにエラーメッセージを表示
				}
				else
				{
					jqobj.after($('<div />').addClass('error-mesage').text(msg));	// 存在していない場合は当該コンテナ (jqobj) の後に追加して表示
				}
				return;
			};
			if ( rule == 'checked' )	// ルールが「checked」だった
			{
				if ( $(this).find('input:checked').length == 0 )	// 当該コンテナ配下に checked 要素が一つもない
				{
					set_error($(this), msg);
					errors = true;
				}
			}
			else if ( !($(this).attr('value').length == 0 && allowEmpty) )	// データが入力されている、または未入力で data-validation-allow-empty が設定されていない
			{
				var regex = new RegExp(rule.replace(/(^\/)|(\/$)/g, ''));
				if ( !$(this).attr('value').match(regex) )	// 指定されていた正規表現と入力データが一致しなかった
				{
					set_error($(this), msg);
					errors = true;
				}
			}
			if ( !errors && same_as )	// ここまでエラーがなく、「same-as」が指定されていた
			{
				if ( $(this).attr('value') != $(same_as).attr('value') )	// 当該フィールドの値と same-as 指定されたフィールドの値が異なる
				{
					set_error($(this), msg);
					errors = true;
				}
			}
		}
		return ret;
	}
});

バリデーション情報の渡し方は、data- で始まる属性をいくつかタグに付与することで行う。

data-validation-rule

バリデーションルールとして、正規表現または 'checked' を指定する。

data-validation-allow-empty

この属性が指定されている場合は空欄を許す。

data-validation-same-as

同じ値かどうかを比較する欄を特定するセレクタ文字列を指定する。email 欄と確認用 email 欄の比較などに利用する。

data-validation-error-message

バリデーションに失敗した場合のエラーメッセージ。

属性は1つずつしか指定できないので、複数のバリデーションルールやそれらに対し異なるエラーメッセージを与えることはできない点に注意。

下の実例では id="confirm" が指定されたオブジェクトをクリックするとフォーム内の対象を一度に処理しているが、blur() イベント処理を使えば入力欄からフォーカスが外れたら即バリデーションを行うような使い方も可能。

利用例はこちら。

<script type="text/javascript" language="javascript">
$(function () {	// jQuery で確認ボタン処理
	$('#confirm').click(function () {
		$('div.form').find('input[type="text"], textarea, .validation').each(function () { $(this).validate(); return true; });
	});
});
</script>

<div class="form">
	<form action="#" method="post">
		<table cellspacing="3" class="tb mBtm05" summary="フォーム">
			<tbody>
				<tr>
					<th>
						お名前</th>
					<td>
						<input class="text" data-validation-error-message="お名前が記入されていません。" data-validation-rule="/^.+$/" name="name" type="text" value="" /></td>
				</tr>
				<tr>
					<th>
						お名前フリガナ</th>
					<td>
						<input class="text" data-validation-error-message="お名前フリガナを全角カタカナでご記入ください。" data-validation-rule="/^[ァ-ンー　]+$/" name="yomi" type="text" value="" /></td>
				</tr>
				<tr>
					<th>
						メールアドレス</th>
					<td>
						<input class="text" data-validation-error-message="メールアドレスが記入されていないか、不正な形式です。" data-validation-rule="/^[\x01-\x7F]+@(([-a-zA-Z0-9]+\.)*[a-zA-Z]+|\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\])$/" name="email" type="text" value="" /></td>
				</tr>
				<tr>
					<th>
						メールアドレス<em class="em">確認用</em></th>
					<td>
						<input class="text" data-validation-error-message="確認用メールアドレスが記入されていないか、不正な形式です。" data-validation-rule="/^[\x01-\x7F]+@(([-a-zA-Z0-9]+\.)*[a-zA-Z]+|\[\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\])$/" data-validation-same-as="div.form form input[ data-cke-saved-name='email' name='email']" name="email-conf" type="text" value="" /></td>
				</tr>
				<tr>
					<th>
						性別</th>
					<td>
						<ul class="list validation" data-validation-error-message="性別が選択されていません。" data-validation-rule="checked">
							<li>
								<label><input id="gender_f" name="gender" type="radio" value="1" /> 女性</label></li>
							<li>
								<label><input id="gender_m" name="gender" type="radio" value="2" /> 男性</label></li>
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
		<p class="font10 mBtm20">
			<span class="validation" data-validation-error-message="同意欄がチェックされていません。" data-validation-rule="checked"><input name="" type="checkbox" value="" /> <a href="#">個人情報保護方針</a> に同意する。</span></p>
		<div class="txtC mBtm50">
			<input alt="上記内容で送信する" id="confirm" name="" src="/common/img/send_btn_01.jpg" type="image" value="" /></div>
	</form>
</div>