を作ってみました。
フォームの送信はjqueryのajaxメソッドで、Pear::HTML_QuickFormはエラーチェックに使っています。
エラーがある場合はphpからjsonでエラーフラグとエラーメッセージを出力し、jqueryでエラーを受け取って処理します。
jqueryでエラーチェックのロジックを書いてもいいと思いますが、HTML_QuickFormのエラーチェックは使い慣れているので、この組み合わせでメールフォームを作ってみました。
こちらがそのフォームです。メールは飛ばないので、好きなだけ送信ボタンを押して大丈夫です。
サンプルメールフォームhtml,css,javascript,phpを完全に分離しているので、このようにブログ記事、ページ内にフォームを設置できます。(linkタグをdiv内に入れるな、という警告が出てしまいますが)
ソースはこちら。
mail_form.cssmail_form.jsphpはこんな感じです。
<?php
require('HTML/QuickForm.php');
require('HTML/QuickForm/Rule.php');
$form = new HTML_QuickForm('mailForm');
$form->addElement('text','contact_name','contact_name',array());
$form->addRule('contact_name', 'お名前を入力してください', 'required', '', 'server');
$form->addElement('text','contact_email','contact_email',array());
$form->addRule('contact_email', 'メールアドレスを入力してください', 'required', '', 'server');
$form->addRule('contact_email', 'メールアドレスを正しく入力してください', 'email', '', 'server');
$form->addElement('text','contact_title','contact_title',array());
$form->addRule('contact_title', '件名を入力してください', 'required', '', 'server');
$form->addElement('text','contact_description','contact_title',array());
$form->addRule('contact_description', '内容を入力してください', 'required', '', 'server');
$result = array();
$result["error"] = 0;
if($form->validate()){ $form->process("send_emails",FALSE); }
else{
$result["error"] = 1;
$result["error_msgs"] = $form->_errors;
}
echo json_encode($result);
exit;
function send_emails($v){
//メール送信
}
?>
昨年後半から少しずつjqueryの勉強をしていますが、こうやって実用的なアプリケーションが作れるようになってくるとコーディングも楽しくなってきますね。
今年はさらにjqueryの知識や経験を深めていきたいと思います。
※2011/01/24追記
display:noneの要素(送信中表示やサンキューメッセージ)からはouterWidth()等のメソッドで要素のサイズを取得できないことがわかったので、display:noneではなくvisibility:hiddenを使うようにソースを修正しました。
