2010年11月17日水曜日

jQueryでメール送信フォームを作る

求人の応募フォームを作ってよ、という依頼があって、そのときにごにょごにょと作ったのがあるので、それの簡易版を基にいくつかjQueryのプラグインを紹介する。

今回使用するJavascriptファイルは以下の5つ。
jquery-1.4.2.min.js
http://jquery.com/
言わずと知れたjQueryライブラリ。

jquery.validate.min.js
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
検証(バリデーション、Validation)を行うプラグイン。

jquery.scrollTo-1.4.2-min.js
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
滑らかなスクロールを行うプラグイン。今回のサンプルでは縦方向に短かいけれど、現物は項目数がもっと多かったため、入力エラーがあった場合はその項目までスクロールさせたかったので使用している。

hint.js
http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
Watermark(未入力時にヒントテキストがテキストボックス内に表示される)を行うプラグイン。

mailform.js
今回のサンプルを実装している外部ファイル。

上2つのライブラリはMSのCDN(Content Delivery Network)から参照可能なのでそれぞれ下記のURLを参照すると良い。
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js


フォームの外観は下図。ヒントとして入力例テキストボックスに表示されている。

何も入力しない状態で確認画面へをクリックすると下図になる。必須項目の検証が行われている。

年齢、メールアドレス、確認用メールアドレスはそれぞれ、数値の検証、メールアドレスの検証、メールアドレスと同じ値かの検証が行われている。

すべてを入力した状態が下図。

上図の状態で確認画面へをクリックすると下図になり、入力された内容の確認が行える。

同意するにチェックをいれると送信ボタンが有効になり、メール送信なりが行えるようになる。


ここから簡単にいくつかポイントを解説する。

mailform.htm
formタグのactionの値はでたらめなので適当な値に修正してもらいたい。formタグ内にsubmitボタンを配置するとクリック時に入力エラーがあっても勝手に飛んでいってしまうのでformの外側に配置している。入力項目はclassにinput_modeが設定されている。また確認時に表示する項目にはconfirm_modeが設定されている。

mailform.css
input.errorで検証時にエラーだった入力項目の表示を設定できる。今回のサンプルでは入力項目のテキストを赤に変え、周りを赤の線で囲っている。errorは検証エラーのメッセージの表示設定だ。

mailform.js
$form.validateで入力項目の検証を行っている。rulesでどの要素にどのようなルールを適用するかを指定している。messagesはルールに対応するメッセージを指定している。今回使用しているrequired, digits, emailなどのほかにも、range, url, dateなど色々と用意されているので、詳細はこちらを参照して欲しい。

Javascriptをオフにしている人をばっさりと斬って捨てる漢な決断が必要だが、こんな感じで入力内容の検証をすべてクライアントで行い、入力内容をポストすることも可能だ。

今回のサンプルは下記からダウンロードできる。

0 件のコメント:

コメントを投稿