jQuery-Validation-Engine で Ajax の独自チェックを追加する方法

ユニークチェック等一度 DB を舐めてやらないとイケない場合等は処理をバックエンドに回す必要があるんですがその方法がいまいちドキュメントとして無かったのでメモがてらに残しておきます。

<script>
$(function() {
  $('#form').validationEngine('attach', {
    promptPosition: 'bottomLeft',
    ajaxFormValidationMethod: 'post',
    allrules: {
      checker: {
        url: 'checker.php',
        alertText: 'すでに使われています',
        alertTextOk: '利用可能です',
        alertTextLoad: 'チェック中...'
      }
    }
  });
});
</script>
<form id="form" action="index.php">
<div>タイトル: <input id="title" class="validate[required,ajax[checker]]"></div>
<div>内容: <input id="contents" class="validate[required,ajax[checker]]"></div>
<input type="submit">
</form>

面倒なのでバックエンドは PHP で書いてます。checker.php が Ajax でひっぱたかれる validator で、validation が通ったら index.php が呼ばれる的な感じです。

allrules で checker と言う key で独自チェッカーをぶら下げます。input form 側では class に ajax[checker] を足します。

alertText と alertTextOk は validation 失敗、成功時のメッセージです。cacher.php 側から返す値で上書きが可能です。allrules での定義を省略する事もできます。

alertTextLoad は Ajax 呼び出し中に出るメッセージですがこの定義は必須です。これを定義しておかないと、フォームの submit 時に checker.php を kick してくれません。why...

デフォルトだとHTTPメソッドが GET ですが変えたい場合は ajaxFormValidationMethod で指定できます。

checker.php は以下のようになります。

<?php

$r = $_REQUEST;
$output = [];

if ($r[fieldId] == 'title') {
  $output = [ 'title', false ];
}
elseif ($r[fieldId] == 'contents') {
  $output = [ 'contents', false ];
}

header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);

fieldId で form の id、 fieldValue でフォームの値が渡ってきます。これらの値を使ってごにょごにょして JSON で [ 'フォームID', 'validation 結果', 'メッセージ ] を返します。

メッセージを省略すると validation 結果に応じて alertText、alertTextOk が表示されます。submit 時は form の分だけ checker.php が連続で呼ばれます。

今回は、checker.php と validation.php を分けていますが、1つで処理したい場合は submit 先で全部さばくために

$('#form').validationEngine('attach', {
	allrules: {
		checker: {
			url: 'checker.php',
			extraData: 'mode=checker',
			alertTextLoad: 'チェック中...'
		}
	}
}

と extraData を渡してやると良いです。こうしてやることで validation 時にだけクエリパラメーターで mode=checker が渡ってきます。これで validation call のハンドリングが可能というわけです。

とまぁ、jQuery-Validation-Engine の使い方自体はわかっている前提で書きました。こいつはフロントエンド側で Validation を気軽にできる jQuery の plugin で使い方が非常にシンプルでドキュメントも結構転がっています。是非ググって使ってみてください。独自チェックをしたい場合よくわからなくなると思うので、その時は今書いたことを参考にしてみてください。

おまけ

submit 前に何か JS 側で引っ掛けたい場合

$('#form').validationEngine('attach', {
	promptPosition: 'bottomLeft',
	onValidationComplete: function() {
		return window.confirm('よいですか？')
	}
});

とすると良いです。

validation が通ってから submit したい時はこんな感じで。

$('#create').click(function() {
  var ret = $('#form').validationEngine('validate', {
    promptPosition: 'bottomLeft'
  });
  if (ret) {
    if (window.confirm('よろしいですか？')) {
      $('#form').submit();
    }
  }
  return false;
});