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

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

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

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

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

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

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

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

著者プロフィール

長谷川広武(はせがわひろむ;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/

コメント

コメントの記入