jQuery：リアルタイムなフォーム入力チェックを簡単に実装！「validationEngine」の使い方

: だま

2020.10.27

PCやスマホで大抵なんでもかんでも手続きができちゃう現代。

通販を利用する時、舞台のチケットを取る時、ファンクラブに登録する時、etc...

様々な場面でフォームに入力をする機会があると思います。

そんな時ストレスになるのが、確認画面へ移動した後に通知される入力エラーの存在。

しっかり確認していない自分も悪いけど...とは思いつつ、また入力画面へ戻って項目を確認して...という手間はストレスになります。

せめて確認画面へ移動する前にエラーを出してくれたら...

インコもお怒りの様子

お問い合わせや資料請求などのフォームまで足を運んでくれた貴重なユーザーをこんな作業のストレスで逃したくはないですよね。

という事で、今回は「validationEngine」を使ってリアルタイムな入力チェックを実装し、離脱率を下げてコンバージョン率をアップさせちゃいましょう。
jQueryプラグインなのでとっても簡単に実装できます。

デモページ

HTMLでフォームを作成

まずはフォームを用意します。

validationEngineの呼び出しに使用するので、<form>タグにidを設定してあげてください。

<h2>申し込みフォーム</h2>
<div>
    <form action="" method="post" name="form" id="formCheck">
        <dl>
            <dt>お名前 ※必須</dt>
            <dd><input name="namae" type="text" value="" placeholder="例)電脳花子"></dd>
        </dl>
        <dl>
            <dt>郵便番号 ※必須</dt>
            <dd><input name="zipnumber" type="text" value="" placeholder="例)460-0002"></dd>
        </dl>
        <dl>
            <dt>都道府県 ※必須</dt>
            <dd><select name="pref">
            <option value="" selected="selected">選択してください</option>
            <option value="北海道">北海道</option>
            <option value="青森県">青森県</option>
            <!-- 長いので省略 -->
            <option value="鹿児島県">鹿児島県</option>
            <option value="沖縄県">沖縄県</option>
            </select></dd>
        </dl>
        <dl>
            <dt>市区町村 ※必須</dt>
            <dd><input name="address1" type="text" value="" placeholder="例)名古屋市中区丸の内"></dd>
        </dl>
        <dl>
            <dt>番地・建物名 ※必須</dt>
            <dd><input name="address2" type="text" value="" placeholder="例)2-17-30 ie桜通伏見ビルディング8F"></dd>
        </dl>
        <p><input type="submit" value="確認画面へ進む"></p>
    </form>
</div>

かなりシンプルですが、スタイルを軽くあててこんな感じに。

プラグインをダウンロード

次はvalidationEngineのzipファイルをダウンロードし、解凍します。

validationEngine GitHubページ（外部リンク）

フォルダの中から下記のcss、jsファイルをhead内に読み込みます。

<link rel="stylesheet" href="css/validationEngine.jquery.css">
<script src="js/jquery-1.9.1.min.js"></script><!-- jQueryも忘れないでね -->
<script src="js/jquery.validationEngine.js"></script>
<script src="js/languages/jquery.validationEngine-ja.js" charset="UTF-8"></script>

「languages」フォルダに入っているjsですが、今回は日本語入力のフォームを作成するので「jquery.validationEngine-ja.js」を使用します。
もしも他の言語を使用する場合は対応したjsを読み込んでください。
（30種類以上の言語に対応しているみたいです。すごい）

validationEngineを呼び出す

headの中に下記のjQueryを記述します。

<script type="text/javascript">
    $(function(){
        //<form>タグのidを指定
        $("#formCheck").validationEngine(
            'attach', {
                promptPosition: "topLeft"//エラーメッセージ位置の指定
            }
        );
    });
</script>

必須項目の入力チェックを設定

ここまで来たら、あとはclassを設定していくだけ！
今回のフォームは全て必須項目にしているので、「必須項目が入力されているか」を判定するclassを付けてみましょう。
必須項目のinputやselectにclass="validate[required]"を追加していきます。

<h2>申し込みフォーム</h2>
<div>
    <form action="" method="post" name="form" id="formCheck">
        <dl>
            <dt>お名前 ※必須</dt>
            <dd><input class="validate[required]" name="namae" type="text" value="" placeholder="例)電脳花子"></dd>
        </dl>
        <dl>
            <dt>郵便番号 ※必須</dt>
            <dd><input class="validate[required]" name="zipnumber" type="text" value="" placeholder="例)460-0002"></dd>
        </dl>
        <dl>
            <dt>都道府県 ※必須</dt>
            <dd><select class="validate[required]" name="pref">
            <option value="" selected="selected">選択してください</option>
            <option value="北海道">北海道</option>
            <option value="青森県">青森県</option>
            <!-- 長いので省略 -->
            <option value="鹿児島県">鹿児島県</option>
            <option value="沖縄県">沖縄県</option>
            </select></dd>
        </dl>
        <dl>
            <dt>市区町村 ※必須</dt>
            <dd><input class="validate[required]" name="address1" type="text" value="" placeholder="例)名古屋市中区丸の内"></dd>
        </dl>
        <dl>
            <dt>番地・建物名 ※必須</dt>
            <dd><input class="validate[required]" name="address2" type="text" value="" placeholder="例)2-17-30 ie桜通伏見ビルディング8F"></dd>
        </dl>
        <p><input type="submit" value="確認画面へ進む"></p>
    </form>
</div>

これでもう必須項目の入力チェックが実装できました！
フォームを選択後、何も入力しないままカーソルを外すとエラーメッセージが表示されます。