バリデーションをプラグインを使わずに実装する

フォームは主にコンバージョンに直結する場合が多いと思いますので、ユーザビリティを向上させる、つまりユーザーに最後まで入力してもらえるようなフォーム作りはとても重要です。

どのような機能を持って使いやすくするのか、にはそのサイト自体のターゲットユーザー層を認識した上で盛り込む必要がありますが、どんな方法で使いやすくできるのかは知っておいて損はありません。

前回は、ラベル要素を利用して、直感的に分かりやすくする方法を紹介しましたが、今回・次回にかけては少し突っ込んでJavaScriptで行うバリデーション（※1）を実装してみたいと思います。

入力された文字列をチェックする

文字列チェックのパターン

まずは文字列チェックのパターンをリストに挙げてみましょう。

• 必須チェック（空文字）
• メールアドレス
• 数字のみ
• アルファベットのみ
• 電話番号
• URL

基本的な項目としてはこんな所でしょうか。

チェックの方法

例えば、最初の必須チェックで考えてみましょう。必須チェックは、そのフィールドは入力する必要がある、ということなので

1. 1文字でも文字列が存在するか
2. 半角スペース・全角スペース・改行・タブだけで入力されていないか

以上2つの手順を踏むことで、チェックすることができます。

1）1文字でも文字列が存在するか、をチェックする

1.の1文字でも存在するかのチェックは、テキストフィールドのvalue属性値を監視することで、確認ができます。

テキストフィールドの文字列はvalメソッドで取得します。

var txt = $('input').val();
console.log(txt);

文字列が存在するかのチェックは、文字列の長さ（文字数）で行います。取得したtxtの長さはJavaScriptのlengthプロパティに含まれていますので、以下のように取得できます。

var txtLength = txt.length;
console.log(txtLength);

これで文字数が取得できました。さらに、この文字列がそもそも存在してかつ長さ（文字数）が0以上の場合にスクリプトが実行するには以下のようにif文を書きます。

if(txt && txtLength>0){
    console.log(txtLength); // ここで実行する
}else{
    // ない場合は何もしない
}

2）半角スペース・全角スペース・改行・タブだけで入力されていないかのチェック

この4つのチェックには正規表現というものを使います。正規表現は文字列のパターンマッチングに使われるもので、様々なプログラミング言語で使われています。本連載ではバリデーションに必要になる触りの部分を紹介します。まずは、このチェックをするためのスクリプト部分を例にあげてみます。空白の箇所には半角スペースと全角スペースが含まれています。

if(txt.match(/^[ 　\r\n\t]+$/)){
    console.log('err');
    return false;
}

正規表現

文字列に含まれている文字やパターンなどを判定するのが正規表現です。例えば、数字を判定したいときは

\d
// または
0-9

というように書くことで1文字の数字を判定できます。つまり\dは0～9のうちのいずれかということになります。

またアルファベットと数字、アンダースコアをまとめて

\w
// または
a-zA-Z0-9_

となります。

パターンも判定できるので、例えばEmailアドレスを判定したいときは

^[^@ 　\t\n\r]+@[\w\-\.]+\.[\w\-\.]+$

というような正規表現で行います（※2⁠）⁠。

正規表現によるマッチング

正規表現を用いたパターンマッチングを行うには、JavaScriptのmatchメソッドを使います。matchの引数に半角スラッシュで正規表現を挟んだ「正規表現リテラル」を与えることで、指定した正規表現にマッチした文字列を含んでいればtrue、いなければfalseが返されます。

strings.match(/正規表現/)

連載中で使用するマッチングの表現

まずは連載で使用するマッチングの表現を挙げておきます。これらはメタ文字、定義済み文字クラスと呼ばれます。

メタ文字

正規表現で使われる独特の意味を持つ文字。

定義済み文字クラス

それ単体で数字やアルファベットをまとめて表すことができる文字・表現。

エスケープ

上記のメタ文字で定義されている文字列を文字として扱いたい場合や定義済み文字クラスを使う場合は、文字をエスケープする必要があります。

簡単に言うと、バックスラッシュを前に置くだけです。

\*
\d
 
// など

エスケープ文字はフォントによって、バックスラッシュ・円マークと変わりますが、入力する際はバックスラッシュを入力します。

WindowsではBackSpace左の円マークキー、Mac OS Xではoption+delete横の円マークキーでバックスラッシュの入力になります。

使用例：簡易メールアドレスチェック

メールアドレスとして明らかに間違っているものをチェックします。

メールアドレスの形式は通常

[email protected]

のようになっています。今回は簡易チェック（※3）なので、この形式に沿っているかをチェックしたいと思います。これは先ほども少し紹介したように以下の正規表現で行います。

^[^@ 　\t\n\r]+@[\w\-]+\.[\w\-\.]+$

この正規表現を文章にすると

「@半角スペース全角スペースタブ改行を含まない文字列1文字以上、@1文字、半角アルファベット数字ハイフン（-）アンダースコア（_）1文字以上、半角ドット（.）1文字、半角アルファベット数字ハイフン（-）アンダースコア（_）半角ドット（.）1文字以上で始まって終わる文字列」

ということになります。まだ少しわかりにくいかもしれません。

ひとつひとつ分けてみましょう。上記のパターンは10の文字列・メタ文字・定義済み文字クラスの組み合わせで構成されています。

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

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

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

bindメソッド

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

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

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

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

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

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

removeメソッド

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

$(elm).remove();

endメソッド

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

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

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

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

afterメソッド

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

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

Emailバリデーションの実装

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

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もあまり出てこなかったので面白くなかったかもしれません。次回は今回説明した内容をふまえてバリデーション関数を作ってみましょう。