jQuery.validation.jsとAjax Username Checkerを組み合わせて使う

Ajax Username Checker – Ajax Username Checkerのサンプル
– jQuery、PHP、CSVを組み合わせて、入力したユーザネームが利用できるかどうかをチェックできるよ！

というのがあるんですがOKWave（と教えてgoo）からリファラーがきてて
みたら jQuery.validation.jsとAjax Username Checkerを一緒に使えないか みたいな感じでした。

で 面白いのでjQuery.validation.jsで使えるようにソースを修正してみました。

実際に動作してるサンプル

同時に使う（チップにユーザチェックの結果を表示する）には

まずはcheck.phpを少し変えます

$username = $_POST['username']; // get the username
$username = trim(htmlentities($username)); // strip some crap out of it
$file = '/home/js4hire/public_html/gafyd/data.csv'; // Here's the file. Notice the full path.

echo check_username($file,$username); // call the check_username function and echo the results.

function check_username($file_in,$username){
$username=strtolower($username);
$file = file($file_in);
foreach ($file as $line_num => $line) {
$line = explode(',',$line);
$user = trim(str_replace('"','',$line[0]));
if($username == strtolower($user)){
return 'Username Unavailable'; // ここを変える
}
}
return 'Username Available'; // ここを変える
}
?>

上記ソースのここを変える部分をそれぞれ true と false に。
PHPには判定だけしてもらって表示するテキストはJS側で操作することにします。

変更後のソースが↓です。
CSVはサイトパスが必要なんですがサイトパス部分は表記してないです。
使うサーバとCSVの場所に合わせて変えてください。

$username = $_POST['username']; // get the username
$username = trim(htmlentities($username)); // strip some crap out of it
$file = '(sitepath)/data.csv'; // Here's the file. Notice the full path.

echo check_username($file,$username); // call the check_username function and echo the results.

function check_username($file_in,$username){
$username=strtolower($username);
$file = file($file_in);
foreach ($file as $line_num => $line) {
$line = explode(',',$line);
$user = trim(str_replace('"','',$line[0]));
if($username == strtolower($user)){
return 'false';
}
}
return 'true';
}
?>

PHPの修正が終わったら次はJSソースの修正です。

まずは普通にアクティベート

$(function(){
$(".validate").validation({
msgs: {
email: "正しいEメールアドレスを入力してください
例：",
submit: "入力が完了していない必須項目があります。
必須項目は全て入力してください。"
},
dialog: {
dialogOpacity: .8
}
});
//ここに①を追記
});
//ここに②を追記

上記ソースの //ここに①（②）を追記 部分に必要なところを足していくことにします

まずは画像のプリロード

ローディング画像は先日人気になってたPreloaders.netなどからダウンロードして
以下のソースでプリロードしておきます。これをしないと初回の読み込み時によくないことが起こります。

// ローディング画像のプリロード
var loading = new Image();
loading.src = "img/indicator.gif"; // パスは適宜変えてください

ユーザチェックのためにイベントを関連付ける

これより以下で出てくる $.tip はjQuery.validationで定義してるものです。
一応解説しておきます。

$.tip.msg(id,msg)

チップにメッセージを表示させる。
対象チップに対応するinput要素のIDをidに、対象チップに表示させるHTMLタグが使える文字列をmsgにそれぞれ引数として指定します。

$.tip.fadeIn(id)

非表示のチップを表示（フェードイン）させる。
idには対象チップに対応するinput要素のIDを引数として指定します。

$('#name').blur(function(){
if($(this).val().length<1) return false;
$.post("check.php",{
username: $('#name').val() // 参照する値がcsvデータとの比較
},function(response){ // response : csvにデータがあった場合は"true"、ない場合は"false"が返ってくる
$.tip.msg("name",""); // チップの中身をローディング画像にする
$.tip.fadeIn("name"); // チップを表示
setTimeout("finishAjax('name', '"+escape(response)+"')", 1000); // 1000ミリ秒後に finishAjaxを実行する
});
return false;
});

上記でたびたび出てくる “#name” とか “name” は
ユーザネームチェックをするinput要素のIDを入れます。

$.tip.msg()と$.tip.fadeIn()の中は#が必要ないです。

—上記2つは①に追記します

表示するテキストを決めるfunctionを作る

function finishAjax(id, response){
// OKな場合とダメな場合のテキスト
var txt = {
ok: "Username Available",
bad: "Username Unavailabe"
}
// responseの値でflagを作る
var flag = unescape(response)=="true" ? true : false;
// flagがtrueかfalseで表示するテキストを変える
if(flag){
$.tip.msg(id,txt.ok); // テキストの表示
// trueの場合はチップから必須クラスを取り除く（あるとsubmitでエラーを返すため
$("#"+id+"_tip").removeClass("requiredTip");
}else{
$.tip.msg(id,txt.bad);
// falseの場合はチップに必須クラスを付加する
$("#"+id+"_tip").addClass("requiredTip");
}
}

表示するテキストは txt.ok, txt.bad の値を変えるだけです。
タグが使えるのでそれなりに自由に表示できます。
チップ自体もタテ・ヨコに広がるので制限はほとんどないです。

上の例はめんどくさがりな人がAjax Username Checkerのソースをそのまま貼り付けただけなので
span要素のstyle属性が指定されてますが、style属性は使わずにclassで指定しましょう…

—上記は②に追記します

これだけ

以上でjQuery.validation.jsとAjax Username Checkerが併用できるようになります。
サンプルのようにUsername Checkerも動作しています。

名前入力後 1文字以上ならユーザネームのチェックをします。
CSVは手を加えずにAjax Username Checkerと同じものを使ってるので
john、username などでエラーが表示されると思います。

サンプルファイルのダウンロード

validation_alpha.zip(41KB)

*注意）check.php内 $file = ‘(sitepath)/data.csv’; の (sitepath) は適宜変える必要があります。