[jquery]Validation,Impromptu,Formのプラグイン 2008/10/08

シナリオ
「フォームの内容を送信します。フォームの内容はバリデーションします。バリデーションしたあとに確認ダイアログをだして、OKだった場合、AJAXして、結果ダイアログをだします。」

使うのはjQueryプラグイン３種類。

• Plugins/Validation - jQuery JavaScript Library
• jQuery Impromptu
• jQuery Form Plugin

Validationはsubmitすると勝手にvalidateしてくれます。
Impromptuはプロンプト、ダイアログをだすに使えます。
Formプラグインは、フォームの中身をajaxして通信してくれるみたい。

---

僕が注意した要点だけかいつまんで。
まずフォームのsubmitの処理を変更。

$('#f').submit(function(){ return true; });

ValidationのruleでsubmitHandlerをコールバック関数を定義。
フォームの内容がOKの場合呼ばれるようにします。

バリデーションのルールを定義。

例)
var rules = {
submitHandler: function() { prompt(); },
rules:{
fullname_kanji:{ my_check:'お名前（漢字）' }
// そのルールを記述
}
};

バリデーションのルールの渡し方は、
$("#f").validate(rules);

次にsubmitHandlerで呼ばれる関数を定義します。
この中でダイアログをだします。
やっていることは確認ダイアログだしてOKなら通信してsuccessならまたダイアログをだす。
※ここのコードはおおざっぱ。

function prompt(){
$.prompt(msg, { buttons: { Ok: true, Cancel: false }, focus: 1,
callback:function(v, m){
if(v){　 // OKの場合
var options = {
url: '通信先.php',
type: 'post',
success: function() {
//処理が成功のときのダイアログ
$.prompt('送信しました。',{
buttons: { 'トップページに移動': 'トップページに移動', Bye: 'Good Bye' }
});
}
};// options end
$('#f').ajaxSubmit( options );
}// if end
}
});
}

jQueryのプラグインのコードをいろいろみて、寄せ集め的に作成したので、参考にならないけど....