もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第10回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(2):プラグインを使わずにバリデーションを実装

この記事を読むのに必要な時間:およそ 4 分

Emailバリデーションを実装してみる

それでは,実際にテキストフィールドにメールアドレスのチェックを追加してみましょう。

その前に今回が初出のメソッドを紹介しておきます。

bindメソッド

第2引数で指定した関数を第1引数で指定したリスナーをトリガーに実行するように対象要素にbindします。

少し理解しにくいかもしれませんが,blurメソッドやclickメソッドなどのイベント追加メソッドをまとめて指定できます。

clickとblurで同じ内容の関数を実行する

$(elm).click(function(){
    console.log('event happened');
}).blur(function(){
    console.log('event happened');
});

などのようにclickとblurで同じ関数を実行するような場合は

bindメソッドでまとめることができる

$(elm).bind('click blur',function(){
    console.log('event happened');
});

のようにまとめることが出来ます。なお複数指定する場合は,上記のように半角スペースで区切ります。

removeメソッド

対象の要素をjQueryオブジェクトから削除します。

removeメソッド

$(elm).remove();

endメソッド

nextメソッドやprevメソッドで行った移動をひとつ上位の要素に戻します。

endメソッド

$(elm).next().remove().end().click(function(){
    console.log($(this));
});

要素の関連性も考えて以下のようにも書けます。

next,endメソッドなどによるjQueryオブジェクトの遷移を視覚的に分かりやすく

$(elm)
    .next()
        .remove()
        .end()
    .click(function(){
        console.log($(this));
    });

afterメソッド

対象の要素の後ろに要素などを追加したりできます。

afterメソッド

$(elm).after('<span>after</span>');

Emailバリデーションの実装

Emailバリデーションの仕様としては,マッチしていればテキストフィールドの後ろにvalidしていなければinvlalidと表示することにします。

Emailバリデーションの実装スクリプト

jQuery(function($){
    $('#email').bind('keyup blur',function(){
        var txt = $(this).val();
        var txtLength = txt.length;
        
        if(txt && txtLength>0){
            if(txt.match(/[^\@  \t\n\r]+\@[\w\-]+\.[\w\-\.]+$/)){
                $(this).next().remove().end().after('<span class="ok">valid</span>');
            }else{
                $(this).next().remove().end().after('<span class="err">invalid</span>');
            }
        }else{
            $(this).next().remove();
        }
    });
});

少し難しかったでしょうか。半分くらい正規表現でjQueryもあまり出てこなかったので面白くなかったかもしれません。次回は今回説明した内容をふまえてバリデーション関数を作ってみましょう。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/