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

だま
だま

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

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

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

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

validationEngine06.jpg

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

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

validationEngine01.jpg
インコもお怒りの様子

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

という事で、今回は「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>

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

validationEngine03.jpg

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

次は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>

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

validationEngine04.gif

また、入力されていない必須項目がある場合に送信ボタンを押すと...

validationEngine05.gif

エラーメッセージを表示し、更に先頭の項目へフォーカスしてくれます。

これで未入力の項目がある状態での画面遷移を防ぐ事ができますね!

validationEngine02.jpg
インコも大満足

今回は必須項目の入力チェックのみを紹介しましたが、他にも色んな条件で入力チェックを行う事ができます。

入力可能な文字数を制限したり、氏名のフリガナをカタカナ入力のみに限定したり...

のちのち別の記事で紹介するので、そちらも是非チェックしてみてください!

※2021/04/28追記

なんか数ヶ月経過してましたね。書きました。

「validationEngine」の入力チェックで使えるオプションを紹介

関連記事