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

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

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

文● 西畑一馬／to-R

■ラジオボタンの必須チェック

　ラジオボタンのバリデーションは、class属性に「validate」と「required」の両方が設定されている要素を対象に実施します。同じname属性（ここでは「gender」)が設定されているラジオボタンのうち、チェックの入っているボタンが1つ以上存在するかを調べます。

　チェックの入っているボタンは、:checked(関連記事)セレクターで特定でき、セレクターに合致する要素の数はsize()を使って調べられます。size()で調べた結果、チェックの入っているボタンの数が0の場合に、エラーメッセージを表示します。


$(":radio").filter(".validate").each(function(){
    $(this).filter(".required").each(function(){
        if($(":radio[name="+$(this).attr("name")+"]:checked").size() == 0){
            $(this).parent().prepend("<p class='error'>選択してください</p>")
        }
    })
})

　ラジオボタンは、name属性が同じinput要素のいずれかにclass属性「validate」「required」が設定されていればチェックできます。


<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要素）に「checkboxRequired」というclass属性を付け、その子要素のチェックボックスが選択されているか調べます。


<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>
</dd>

　class属性が「checkboxRequired」の要素の子要素にあるチェックボックスのsize()が0、つまり何もチェックが付いてない場合のみエラーを表示します。


$(".checkboxRequired").each(function(){
    if($(":checkbox:checked",this).size()==0){
        $(this).prepend("<p class='error'>選択してください</p>")
    }
})

■その他項目のチェック

　チェックボックスの「その他」にチェックが入っている場合には、その後ろの1行テキスト入力フォームにテキストが入力されているか調べます。

　「その他」のチェックボックスには「validate」と「add_text」のclass属性が設定されています。そこで、if文で $(セレクター).attr("checked")==true として「その他」にチェックが入っているかを調べます。replace()と正規表現を使って特定し、val()を使ってテキストが入力されているか調べます。

　まとめると、class属性が「validate」と「add_text」のチェックボックスにチェックが入っており、かつ、_textで終わるname属性のテキスト入力フォームが空の場合に、エラーメッセージを表示します。今回の場合は、「validate」と「add_text」が設定されているチェックボックスのname属性は「etc」ですので、name属性が「etc_text」の1行テキスト入力フォームが対象になります。


$(".validate.add_text").each(function(){
    if($(this).attr("checked")==true && $("input[name="+$(this).attr("name").replace(/^(.+)$/, "$1_text")+"]").val()==""){
        $(this).parent().prepend("<p class='error'>その他の項目を入力してください。</p>")
    }
})

■バリデーションエラー時の処理

　最後に、バリデーションエラーがあった際に実行する処理を設定します。エラーがあった場合、<p class='error'>エラー内容</p>というHTMLが追加されていますので、if文を使ってエラー内容が追加されているかチェックします。

　エラーがあった場合、animate()を使って、最初にエラーがあったフォーム項目にスクロールアニメーションで移動します。セレクターにhtml,bodyを指定して、animate()でscrollTopを変更すると、スクロールアニメーションによるページ内移動ができます。実際には、最初にエラーが出現した要素(p.error:first)よりも少し上を設定すると、項目名が確認できる位置に移動します。

　また、エラーが発生している要素の親要素にはaddClass()でclass属性「error」を追加します。最後にreturn false;を設定して、フォームの送信処理を中断します。


if($("p.error").size() > 0){
    $('html,body').animate({ scrollTop: $("p.error:first").offset().top-40 }, 'slow');
    $("p.error").parent().addClass("error");
    return false;
}

　以上でフォームバリデーションのスクリプトが完成しました。フォームバリデーションは厳格にやろうとすればするほど複雑なスクリプトになってしまいますし、あまり厳しくしすぎるとユーザーが途中で挫折して入力を断念してしまう可能性もあります。バリデーションはあくまでユーザビリティの向上を目的に作成しましょう。

著者：西畑一馬（にしはたかずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。

前へ 1 2 3 次へ

ツイートする

カテゴリートップへ