JavaScript コード

ここに、それを行う方法があります。まず最初に、validator() をコールし、 クライアント側のバリデータを初期化し、その後カスタムのフォーム送信ロジックを追加します。 クライアント側の検証を通過したかどうかをテストするには、jQueryのイベントオブジェクトの isDefaultPrevented() メソッドを使用することができます。

// initialize validator and add a custom form submission logic
$("#myform").validator().submit(function(e) {
 
var form = $(this);
 
// client-side validation OK.
if (!e.isDefaultPrevented()) {
 
// submit with AJAX
$.getJSON("server-fail.js?" + form.serialize(), function(json) {
 
// everything is ok. (server returned true)
if (json === true)  {
form.load("success.php");
 
// server-side validation failed. use invalidate() to show errors
} else {
form.data("validator").invalidate(json);
}
});
 
// prevent default form submission logic
e.preventDefault();
}
});

ここでは、サーバ側でデータが妥当であったことを示のに、簡単な返り値 true を使用しました。 データが妥当な場合は、どのような処理も行うことができます。 ここでは、サーバ側のページでフォーム内容を置き換えました。 データが妥当でなかった場合、ユーザへエラーを表示するためにe invalidate メソッドを使用します。 invalidate は、エラーとなったフィールド名であるオブジェクト引数を受け取ります。 server-fail.js は、サーバ側の "ロジック"であり、常に次の値を返します:

HTMLコードの後に​​スクリプトブロックを置くか、代わりにjQueryの $(document).ready を使用することができます。