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

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

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

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

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

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

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

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

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

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

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

チェックの方法

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

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

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

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

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

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

テキストフィールドのvalue値取得
var txt = $('input').val();
console.log(txt);
テキストフィールドのvalue値取得の実行結果
テキストフィールドのvalue値取得の実行結果

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

テキストフィールドのvalue値の長さ取得
var txtLength = txt.length;
console.log(txtLength);
テキストフィールドのvalue値の長さ取得の実行結果
テキストフィールドのvalue値の長さ取得の実行結果

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

文字列が存在しないまたは、長さが0の場合は終了
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(/正規表現/)

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

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

メタ文字

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

メタ文字
メタ文字説明
[012]0,1,2のいずれか
[^012]0,1,2のいずれでもない
^012012で始まる
012$012で終わる
a?0または1文字のa
a*0文字以上のa
a+1文字以上のa
.任意の1文字

定義済み文字クラス

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

定義済み文字クラス
定義済み文字クラス説明
\dまたは 0-90-9の半角数字
a-zA-Z半角英数字
\r\n改行
ラウザによってまちまちなので両方を指定
\tタブ

エスケープ

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

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

\*
\d
 
// など

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

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

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

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

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

aaaa@aaaa.com

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

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

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

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

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

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

簡易Emailアドレスチェックの正規表現を分解
パターン(赤文字部分)説明
^(最後まで)~で始まる
[^@  \t\n\r]@, 半角スペース, 全角スペース, タブ, 改行 文字以外
[^@  \t\n\r]+直前の文字(@, 半角スペース, 全角スペース, タブ, 改行 文字以外)を1文字以上
@@1文字
[\w\-]半角数字, 半角アルファベット, アンダースコア, ハイフンのいずれか
[\w\-]+直前の文字(半角数字, 半角アルファベット, アンダースコア, ハイフン)を1文字以上
\.半角ドット1文字(半角ドットはメタ文字のためエスケープが必要)
[\w\-\.]+$半角数字, 半角アルファベット, 半角アンダースコア, 半角ハイフン, 半角ドットのいずれか
[\w\-\.]+$ 直前の文字(半角数字, 半角アルファベット, アンダースコア, ハイフン のいずれか)を1文字以上
(最初から)$ ~で終わる

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

おすすめ記事

記事・ニュース一覧