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

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

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

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

※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;
}