Web制作の現場で使えるjQuery　UIデザイン入門 ― 第22回

jQueryでバリデーション付きメールフォームを作ろう

2009年12月02日 13時00分更新

文● 西畑一馬／to-R

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第22回です。過去の記事もご覧ください。

　今回はjQueryを使って、「問い合わせフォーム」にバリデーション（検証）機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。

今回制作するサンプル


（画像クリックでサンプルページを表示します）

バリデーションルールをclass属性で設定

　「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか？」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス（確認）」に入力されたテキストが同じか――をチェックします。


作成するHTMLフォームのサンプル

　HTML／XHTML（以下、HTML）は、フォーム全体を定義型リスト（dl/dt/dd要素）で記述し、dt要素に「お名前」などの項目名を、dd要素にinput要素などのフォーム部品を配置しています。

　各フォーム部品（input/textarea要素）にはバリデーションの条件を示す「validate」「required」「number」「mail」などのclass属性を付けています。今回のサンプルは汎用性を考え、class属性で適用するバリデーションルールを変更できるように設計します。それぞれのclass属性の意味は後ほど、スクリプトを作成する際に説明しますので、ここでは各フォーム要素にどのようなclass属性が付いているか確認してください。

▼サンプル01（HTML部分）


<h1>当サイトへのお問い合わせ</h1>
<form action="complate.html" method="post">
    <dl>
        <dt>お名前<span>※</span></dt>
        <dd><input type="text" name="name" size="80" class="validate required" /></dd>
        <dt>フリガナ</dt>
        <dd><input type="text" name="furi" size="80" /></dd>
        <dt>郵便番号</dt>
        <dd><input type="text" name="zip1" size="4" maxlength="4" class="validate number" /> - <input type="text" name="zip2" size="3" maxlength="3" class="validate number" /></dd>
        <dt>メールアドレス</dt>
        <dd><input type="text" value="" size="80" name="mail" class="validate mail"/></dd>
        <dt>メールアドレス(確認)</dt>
        <dd><input type="text" value="" size="80" name="mail_check" class="validate mail mail_check"/></dd>
        <dt>性別<span>※</span></dt>
        <dd>
            <input type="radio" value="男性" name="gender" id="man" class="validate required" /> <label for="man">男性</label>
            <input type="radio" value="女性" name="gender" id="woman" /><label for="woman">女性</label>
        </dd>
        <dt>どこでこのサイトを知りましたか?<span>※</span></dt>
        <dd class="checkboxRequired">
            <input type="checkbox" name="search" id="search" value="検索エンジン" /> <label for="search">検索エンジン</label>
            <input type="checkbox" name="freiend" id="freiend" value="知人の紹介" /> <label for="freiend">知人の紹介</label>
            <input type="checkbox" name="mail_magazine" id="mail_magazine" value="メルマガ" /> <label for="mail_magazine">メルマガ</label>
            <input type="checkbox" name="etc" value="その他" id="etc" class="validate add_text" /> <label for="etc">その他</label>
            <input type="text" name="etc_text" value=""  />
        </dd>
        <dt>お問い合わせ内容<span>※</span></dt>
        <dd>
            <textarea id="inquiry" name="inquiry"rows="10" cols="60"class="validate required"></textarea>
        </dd>
    </dl>
    <p><input type="submit" value="送信" /></p>
</form>

　CSSは次のようになります。フォーム部品や項目名の基本スタイルを定義するとともに、バリデーションエラー（必須項目の入力漏れやメールアドレスの入力違いなどがあった場合）用のスタイルも記述しておきます。

　今回のバリデーションのスクリプトは、バリデーションエラー時にdd要素に「error」というclass属性を追加します。p.errorはエラーメッセージを表示するテキストのスタイルで、色を赤に、太字に設定します。

　dd.error input／dd.error textarea／dd.error labelは、エラーが発生したフォーム部品用のスタイルで、背景色をピンクに設定しています。チェックボックスやラジオボタンはlabel要素にも背景色を設定し、label要素の背景がチェックボックスやラジオボタンの背景にも敷かれるように、position:relative;とz-index、margin／paddingで調整して配置しています。


エラーメッセージを表示し、フォームの色を変更している

　ただし、Internet Explorer 6（IE6）やIE7では、チェックボックスやラジオボタンに対するbackgroundプロパティの挙動が他のブラウザーと異なり、意図どおりに表示されません。そこで、スターハックやスタープラスハック（関連記事）を使って、ブラウザーがIE6/IE7の場合のみlabel要素の背景を無効化しています。


IE6,IE7では背景が正しく表現されないため、背景を無効化する

▼サンプル01（CSS部分）


#container{
    width:600px;
    margin:0 auto;
    padding:20px;
    background:white;
}
h1{
    margin-top:20px;
    font-size:large;
    color:#7CADB6;
}
dl dt {
    border-left:5px solid #7CADB6;
    border-bottom:1px solid #7CADB6;
    font-size:small;
    margin:0;
    padding:5px;
}
dl dt span{
    color:red;
    font-weight:bold;
}
dl dd{
    font-size:small;
    margin:0;
    padding:10px;
}
dl dd input{
    position:relative;
    z-index:2;
}
dl dd label{
    position:relative;
    padding:5px 5px 5px 25px;
    margin : 0 5px 0 -25px;
    margin-left:-25px;
    position:relative;
    z-index:1;
}
dl dd.error input , 
dl dd.error textarea , 
dl dd.error label {
    background:#FFCCCC;
}
* html dl dd.error label {
    background:none;
}
*+html dl dd.error label{
    background:none;
}
dl dd p.error{
    margin:0;
    color:red;
    font-weight:bold;
    margin-bottom:1em;
}