2014.12.03

超簡単！フォームをリアルタイムで入力チェックする：jQuery-Validation-Engine

あなたのサイトの入力フォームは、リアルタイムで入力チェックが出来るようになっていますか？リアルタイムチェックを導入していないせいで、入力完了率を下げてお客様を逃していませんか？

リアルタイムチェックをまだ導入されていない場合は、「jQuery Validation Engine」を導入しましょう！「jQuery Validation Engine」はお客様の入力をリアルタイムでチェックしてくれるので、入力エラーを事前に防ぎ、それが入力完了率やコンバージョン率の向上に繋がります。「入力完了率なんてそんなに低くないでしょ」と思われるかもしれませんが、驚くことにフォームの入力完了率は業界別に見るフォーム入力完了率データがすごい！によるとECサイトで約65%という結果があります。

約35%のお客様が途中でフォームから離脱してしまっているんですね。今回はその離脱の原因の一つである「お客様による入力エラー」を未然に防ぐ、「jQuery Validation Engine」をご紹介します！

そもそもなぜフォームからの離脱率が高いのか？

フォームからの離脱に繋がってしまう原因の一つが、「お客様による入力エラー」です。フォームの入力を終えたお客様が、確認画面に行った際に入力エラーを把握すると「入力し直すの面倒くさいからいいや」とフォームを離れてしまうのです。

例えばあなたがショッピングサイトでお買い物をしていて、商品の注文画面にて名前や住所など必要事項を入力しますよね。全ての入力を終えて確認画面へ行くと、そこには「入力内容にエラーがあります」との文字。それもズラーっとエラー内容が記載されています…。いかがですか？また前のページに戻って入力し直すのはとても面倒ですよね。

せっかく入力フォームまで来て頂いたのに、入力エラーによってお客様が離脱してしまうのは、お客様にとっても企業側にとっても良いことは何一つありません。

お客様による入力エラーを未然に防ぐには？

では、「お客様による入力エラー」によるフォームからの離脱を防ぐにはどうすれば良いのでしょうか。その方法の1つとして、フォームの入力チェック(バリデーション)を導入することが上げられます。

そしてオススメなのが、jQueryのプラグイン「jQuery Validation Engine」です。これはその場で(さらにリアルタイムで)入力チェックをし、送信ボタンを押してエラーがあっても、エラー箇所に自動的にスクロールして戻ってくれる優れものです！つまり「jQuery Validation Engine」を導入することで、入力内容にエラーがあったとしても送信ボタンを押す前に入力エラーに気付くことができます。

こうして未然に入力エラーを防ぐことが、入力完了率やコンバージョン率の向上に繋がります。

jQuery Validation Engineを導入しよう

jQuery Validation Engineとは、フォームをリアルタイムで入力チェック(バリデーション)してくれるjQueryのプラグインです。このプラグインの主な特徴は以下です。

フォームをリアルタイムで入力チェック
豊富なチェック方法
エラーがあれば該当箇所までスクロール
エラーメッセージが日本語に対応
エラー表示のデザインが良く分かりやすい

STEP1 : 必要なファイルをダウンロードしよう

必要なファイルをダウンロードしよう

まず初めに、jQuery-Validation-Engineの配布サイトへアクセスし、画面右下にあるボタンよりZIPファイルをダウンロードしてください。ダウンロードしたZIPファイルを解凍し、以下のファイルをお好きな場所に設置します。

/js/jquery-1.8.2.min.js (jQueryの本体)
/js/jquery.validationEngine.js (プラグインの本体)
/js/languages/jquery.validationEngine-ja.js (日本語ファイル)
/css/validationEngine.jquery.css (スタイルシート)

設置した上記4つのファイルを読み込むために、HTMLファイルのヘッダー内(<head>～</head>)に以下のコードを記述をします。※下記はHTMLファイルから見て「css」フォルダに「validationEngine.jquery.css」を、「js」フォルダにjQuery本体・プラグイン本体と日本語ファイルを入れた例です。あなたのサイト構造に合わせて適宜ご調整ください。

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.validationEngine.js"></script>
<script src="js/jquery.validationEngine-ja.js"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css">

STEP2 : 実装用コードを記述

続いて、「jQuery Validation Engine」を実行するためのコードを記述します。HTMLファイルのヘッダー内(<head>～</head>)に下記コードを記述します。

<script>
  $(function(){
    jQuery("#form_1").validationEngine();
  });
</script>

$(function(){

jQuery("#form_1").validationEngine();

});

</script>

上記コードの3行目は「ID名がform_1というフォームに対して入力チェックを行う」という意味です。「#form_1」の部分を実装するフォームのID名に変更してご使用ください。

STEP3 : チェックを行いたい要素にクラス名を追加

最後に、入力チェックを行いたい項目(input要素)に「validate[]」というクラスを追加して完了です！まずは下記コードをご参照ください。

<input type="text" name="" class="validate[]">

1	<input type="text" name="" class="validate[]">

上記コードのようにinput要素に「validate[]」というクラスを付与し、validate[]の”[]”の中にチェック方法を入れることで、そのチェック方法に従ってバリデーションを実行します。以下は主なチェック方法です。

[required]：必須入力項目
[custom[形式]]：形式チェック
[required,custom[形式]]：形式チェック+必須入力項目

例えば、下記コードのようにクラスにvalidate[required]と記述することでその入力欄は必須入力項目になります。

  <input type="text" name="" class="validate[required]">

1	<input type="text" name="" class="validate[required]">

入力形式のチェックを行いたい場合は、例えばクラスにvalidate[custom[形式]]と記述することでカッコ内の形式でチェックを行います。下記の場合は形式がemailであるため、正しいメールアドレス形式で入力をしないとエラー表示を出します。

<input type="text" name="" class="validate[custom[email]]">

1	<input type="text" name="" class="validate[custom[email]]">

以下は主な入力形式のチェック方法です。

email：メールアドレス(@マーク含む英数字)が入力されているかチェック
phone：電話番号(数字またはハイフン)が入力されているかチェック
url：URL(httpから始まる文字列)が入力されているかチェック

jQuery Validation Engineには他にも様々な入力チェックのオプションがあります。jQuery Validation Engineのサンプルページには、上記に記載していないパターンを実装していますので、ぜひご参照ください。またフォームの入力内容をチェックする方法という記事に非常に多くのオプションが記載されています。ぜひご参照ください！

まとめ

いかがでしたか？これにて「jQuery Validation Engine」の導入が完了です！たった数行のコードを記述するだけで簡単に実装出来るなんて凄いですよね。これで、入力内容にエラーがあったとしても送信ボタンを押す前に入力エラーに気付くことができます。そしてバリデーションの導入によってフォームのユーザビリティが向上し、入力完了率やコンバージョン率の向上に繋がります。

下記はサンプルページのコードです(一部実装に不要な部分とスタイルシートは省略しています)。

<!DOCTYPE html>
  <head>
    <!-- ▼jQuery本体 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!-- ▼バリデーション -->
    <script src="js/jquery.validationEngine.js"></script>
    <script src="js/jquery.validationEngine-ja.js"></script>
    <link rel="stylesheet" href="css/validationEngine.jquery.css">
    <script>
      $(function(){
        jQuery("#form_1").validationEngine();
      });
    </script>
  </head>

  <body>

  <!-- ▼フォーム -->
  <form id="form_1" name="" post="">
  <label>名前</label>
  <input type="text" name="" class="validate[required]">
  <label>メールアドレス</label>
  <input type="text" name="" class="validate[custom[email]]">
  <label>電話番号</label>
  <input type="text" name="" class="validate[custom[phone]]">
  <label>URL</label>
  <input type="text" name="" class="validate[custom[url]]">
  <input type="submit" name="" id="btn_submit">
  </form>

  </body>
</html>

<!DOCTYPE html>

<head>

$(function(){

jQuery("#form_1").validationEngine();

});

</script>

</head>

<body>

<label>メールアドレス</label>

</form>

</body>

</html>

合わせて読んでおきたい記事はこちら！

超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker

日付入力でストレスを与えていない？「jQuery ui Datepicker」でカレンダーを実現しよう！

この記事をシェアする

Webデザインファン