Ajaxへの対応 ver1.2

MooToolsのForm.ValidatorとForm.Requestを使いたいが為に実装しました(笑)
XHRでzeromail.phpにリクエストを送信すると送信したスクリプトに結果が返されるので、jQueryやprototypeなど他のライブラリでもAjaxなメールフォームを作成することが出来ます。

利用方法

Ajaxを利用しているかどうかはnoscriptというキーの値によって判別しています。
これがfalseの場合のみAjaxを使っていると判断して結果がすべてprint出力になりますので、フォームか送信データ内に含めるようにしてください。

hiddenフィールドの場合:

<input type="hidden" name="noscript" value="false" />

MooToolsのForm.Request(或いはその他ライブラリ)の場合:

extraData :{"noscript":"false"}

noscript=trueもしくはPOSTされるデータの中にnoscriptというキーが含まれていない場合は、通常動作と同じくページ遷移を行います。

ファイル添付を利用する場合は通常の方法で送信を行ってください。

確認画面の表示 ver1.4

POSTされるデータの中にconfim=trueがあるとPHP版のような確認画面が返されます。
確認画面のボタンを押した際に再び同じフォーム内容を送信することになるので、送信するデータにmode=Sendという値を追加してください。

zeromail-ajax.js

追加パッケージで配布しているjsファイルについて解説。

MooToolsのForm.ValidatorとForm.Requestを併用するものになっています。
バリデーターは定番のエラーメッセージがフォームの下に表示されるForm.Validator.Inlineで、
Form.Requestはスピナーとかが表示されるForm.Request.Appendを使用するソースです。
同封のmootools-formpack.jsにはForm.ValidatorとForm.Requestに関するMore全てと、
この記事で晒している日本語正規表現チェック、
Noritaka Horio氏作langファイル(の警告メッセージをZeroMailと揃えたもの)が含まれています。

設定

フォーカスさせる要素のID
開いた時にカーソルをフォーカスさせます
フォームのID
バリデーターとForm.Requestを使うフォームのID
結果を表示する要素のID
zeromail.phpから帰ってきたリクエストを表示します
リセットボタンのID
resetは使用不可
閉じるボタンの文字
buttonタグのhtmlなので画像とかも入れれる
確認画面の表示
デフォルトはfalse。trueで表示します
送信ボタンの文字
確認画面を表示する場合に使用します

フォームバリデーションについて

Ajaxパックに入れてあるmootools-formpack.jsにはMooToolsのForm.Validaterが含まれています。
zeromail-ajax.jsで呼び出しているのはForm.Validater.Inlineクラスです。

バリデートの指定は基本的に全てクラス名です。
公式ドキュメントにあるものと、Form.Validator.Extrasのクラスこの記事で晒しているクラスが有効。
使い方はNoritaka Horio氏によるForm.Validaterの解説記事がとても参考になります。

レスポンスに広告やスクリプトが挿入される場合

Ajaxで送受信を行う場合、広告が挿入される無料レンタルサーバーだと
大抵zeromail.phpからのレスポンスにも広告が挿入されてしまうので、
JavaScript側でそれらを削除する設定が必要になってきます。
ライブラリを使用するとレスポンスに含められるスクリプトは自動的に削除してくれたりしますが、
アクセス解析などのJavaScriptが残ったまま表示すると最悪フリーズしてしまうので注意が必要です。

以前デモを置いていた@PAGESの広告はdivタグ+style属性にtext-align:centerだったので、それを利用して削除していました。

onSuccess:function(el,html){
	req.disable();//フォーム一時停止
	var inner = el.getChildren();//中身取得
	$each(inner,function(div){//広告を探す
		if(div.getProperty("style")=="text-align: center;")
			div.destroy();//要素削除
	});
	if(!el.get("text").test("エラー")) $(form).reset();//内容のリセット
	
	//ボタン作成
	new Element("button",{"id":"close","html":buttonText,
		"events":{
			"click":function(){el.dissolve();req.enable(); }
		}
	}).inject(new Element("p",{"class":"button"})).inject(el,"bottom");
}