このページの本文へ

DESIGN 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/7の表示結果
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;
}


jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング