このブログでかなりアクセスの高い記事がこれ・・・

どんなフォームにも使えるjQueryのフォームバリデーション exValidation 応用編

なんでアクセスされるのかな・・・サンプルあるからかな・・・って思ったら
本家の5509.meサイトがなくなっているからでしょうか。

そこで本来そちらのサイトにあった基本的な使い方も書いておいた方が良いかな・・・ということでサンプル作りました。

ホント、これのバリデーションは使いやすいです。

カスタマイズ性も抜群！分岐条件などがある場合は前の記事を御覧頂いた方がよろしいかと思います。

今回は基本ですので、初期設定をご覧ください。

exValidation 初期値

exValidationのソースから引用しました初期設定です。

/**
// 初期設定
errInsertPos : "body", // "body" or after(before)
err : null,
ok : null,
errFocus : false,
errHoverHide : false,
stepValidation : false,
scrollToErr : true,
scrollDuration : 500,
scrollAdjust : -10,
customScrollAdjust : false,
errPosition : "absolute", // fixed
errOpacity : undefined,
errTipPos : "right", // left
errTipCloseBtn : true,
errTipCloseLabel : "×",
errZIndex : 500,
errMsgPrefix : "* ",
customAddError : null, // function(){}
customClearError : null, // function(){}
customSubmit : null, // function(){}
customListener : "blur keyup change focus",
customBind : null,
*/

この中で、普通にカスタマイズしたいのは
errHoverHide　＝　エラーメッセージにカーソルを乗せると消える
errTipCloseBtn　＝　エラーメッセージに閉じるボタンを表示するか
errTipCloseLabel　＝　上記で表示する場合の閉じるボタンのテキスト「×」
errMsgPrefix　＝　エラーメッセージの先頭文字　「入力してください」の「*」
errTipPos　＝　エラーの表示位置　INPUT 等エレメントに対し左右を調整
scrollToErr　＝　エラーのあった場所へスクロールするか「送信」ボタン押下時などで重宝します。

customListener　＝　どの状態でエラー判定するか
「blur」：カーソルがそこから離れた時
「keyup」：１文字でも入力したらすぐ
「change」：変化があれば（selectやcheckbox,radioなど）
「focus」：カーソルを当てたらすぐ

この中のerrMsgPrefix以外はサンプルで調整しています。参考まで。
あとは好きにいじって調整してください。

基本・・・といっても実践的なシステム向け

基本サンプル１

JavaScriptがわかる方、とくにjQueryもなんとかという方はこちらで大丈夫かと思います。

JavaScript、cssの読み込みをお忘れなく！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 
<title>exValidationサンプル</title> 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 
<link type="text/css" rel="stylesheet" href="css/exvalidation.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/exvalidation.js"></script> 
<script type="text/javascript" src="js/exchecker-ja.js"></script> 
<script type="text/javascript"> // ページ情報読み込めてからチェック項目について設定する $(function(){ var validation = $("#inquiry-form") .exValidation({ // それぞれの項目に「class="chkrequired chkkatakana"」のように記述しているのと同じことをしています。 rules: { name: "chkrequired", name_: "laterCall", kana: "chkrequired chkkatakana", kana_: "laterCall", email: "chkrequired chkemail chkhankaku chkgroup", email_: "laterCall", birthday: "chkrequired chkgroup", birthday_: "laterCall" }, customListener: "blur", // onBlur時のみにしてみる stepValidation: true, errTipCloseBtn: false, errTipPos: "left", // 吹き出しが表示される位置（左右） errHoverHide: true, // マウスオーバーで消える scrollToErr: true // }); // チェックボタンで確認する場合 $('input.laterCall').click(function() { validation.laterCall('#' + this.id.replace('_','')); }); }); // エラー削除 function clearErrors() { // 表示されているエラーをフェイドアウト $("div[id*=err_]").fadeOut(); } </script> 
</head> 
<body> 
	<p class="note"><a href="http://5509.me/log/exvalidation">Archive</a> | <a href="http://5509.me/">5509</a></p> 
<h1>exValidation</h1> 
<form id="inquiry-form" method="get"> 
	<fieldset> 
	<p class="attention">*は必須項目です</p> 
<table> 
	<tbody> 
	<tr> 
	<th>お名前<span>*</span></th> 
<td><input type="text" id="name" name="name" value="" /> 
	<input type="button" id="name_" value="チェック" /></td> 
</tr> 
<tr> 
	<th>ふりがな<span>*</span></th> 
<td><input type="text" id="kana" name="kana" value="" /> 
	<input type="button" id="kana_" value="チェック" /></td> 
</tr> 
<tr> 
	<th>メールアドレス<span>*</span></th> 
<td><span id="email"><input type="text" id="email1" name="email" value="" /> @ <input type="text" name="email2" value="" /></span> 
	<input type="button" id="email_" value="チェック" /></td> 
</tr> 
<tr> 
	<th>生年月日<span>*</span></th> 
<td><span id="birthday"><input type="text" name="birthdayY" value="" /> 年 <input type="text" name="birthdayM" value="" /> 月 <input type="text" name="birthdayD" value="" /> 日</span><input type="button" id="birthday_" value="チェック" /> 
</td> 
</tr> 
</tbody> 
</table> 
</fieldset> 
<p class="submit"><input type="submit" value="送信するんです" class="button" /></p> 
</form> 
<p class="copy">Copyright &copy <a href="http://5509.me/">5509</a> Some Rights Reserved.<br />サンプルについては　<a href="http://gti.jp/">gti.jp</a> フリーフードファイター さとう に著作権があります。</p> 
</body> 
</html>

ちょっと長いですね・・・
laterCall というのは「あとでこの項目を精査する」という感じの機能です。
初期設定の rule のところでこれを「（項目）_」という形式で laterCall 指定してあげれば
その下にある $(‘input.laterCall’).click(function() 〜　の部分がアンダースコアを除いて
項目を取得しチェックする・・・という仕様です。

その下の clearErrorsはエラーが自動的には消えないため一括削除するための関数です。
・・・が、今回使用していません。サンプルとして前回のものから削除していないだけです。

「シンプルに使う場合」のサンプルは 次のページへ

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする
Twitter で