会員サイトをはじめ、お問い合わせフォームなどサイト製作の際には必ずと言っていいほど存在するform入力。入力項目が増えれば増えるほどユーザのエラーも増えていくので、なるべくわかりやすいもので作りたいですね。

そんな時に定番なのが「jquery validation engine」です。ちょっとJavascriptを分かっているかたも、ちょっともJavascriptをわかっていないかたも手軽に導入できますので、ぜひ一度試してみてください。

jquery validation engineの導入方法

  • jquery validation engine公式サイトにアクセスして「Download ZIP」から対象のファイルを落としてくる。
  • ②利用するファイルを各々の環境に合わせて読み込む

    ■必要なファイル

    • /js/jquery.validationEngine.js
    • /js/languages/jquery.validationEngine-ja.js
    • /css/validationEngine.jquery.css

    ■記載例

    
    <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">
    
    

    こんな感じです。jsは</body>の直前でも大丈夫です。

  • ③対象とするformを指定します。以下のコードの「#form_validation」の部分が指定をする箇所なので、それぞれ好きな名前に変えて利用して下さい。

    ■記載例

    
    <script>
      $(function(){
        jQuery("#form_validation").validationEngine();
      });
    </script>
    
    
  • ④対象の要素にclassでチェックしたい内容を記載します。

    ■記載例

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

    よく使うやつを以下に記載します。その他の設定もありますので、公式のサンプルページで確認をするか、「jquery.validationEngine-ja.js」の中身をみながら利用したいものを選んで設定して下さい。

    • validate[required](必須入力)
    • validate[custom[email]](正しいメールアドレスかどうか ※@が入ってるか)
    • validate[custom[phone]](正しい電話番号か ※半角数字か)
    • validate[custom[url]](正しいURLか ※httpから始まるか)
    • validate[required,custom[url]](必須入力かつ、正しいURLか ※カンマ区切りで複数指定可能)

    などなど。
    完璧にチェックをしようとするとけっこう細かい指定が必要になるので、こちらのプラグインの位置付けとしては、実際にサーバに送信する前のある程度ざっくりとしたエラーチェックをするもの。として利用するのが良いかと思います。

エラー表示位置のカスタマイズ方法

ここまでやって問題なくエラー表示ができたら最後はエラー表示をさせる場所やデザインの調整です。デフォルトはformの右上にエラー内容が記載されたバルーンが出るような作りになっているので、まずはそちらの場所を調整しましょう。

先ほど記載した対象のform指定のコードの中に、表示場所を指定させます。

■記載例


<script>
  $(function(){
    jQuery("#form_validation").validationEngine('attach', {
     promptPosition:"topLeft"
   });
  });
</script>

「promptPosition:”topleft”」の部分がエラー表示箇所を指定する箇所です。

  • topRight
  • topLeft
  • centerRight
  • centerLeft
  • bottomRight
  • bottomLeft
  • inline

などの設定項目がありますので、導入サイトのレイアウトに合わせて調整して下さい。

上記は、対象となるすべてのformに一括で適応させる場合の方法で、個別で指定をさせることもできます。その場合には対象の要素に対して、以下のように記載をします。

■記載例

<input type="text" id="sample" class="validate[required]" data-prompt-position="bottomLeft" />

全体の指定をしつつ、個別に設定をしていくような感じで調整していくと良さそうです。

エラー表示の文言・デザインのカスタマイズ方法

最後に、エラー表示の吹き出しバルーンのスタイルを調整します。こちらは「validationEngine.jquery.css」自体を修正しても良いですし、スタイルを上書いても変更できますのでそこまで難しくはないかと思います。
チェックするポイントとしては「.formError」のクラス以下の要素にそれぞれz-indexが設定されていますので、こちらをそれぞれの導入環境に合わせて調整してあげないと、重なる箇所によって表示がおかしくなる可能性があります。重なり順を調整する必要があるか実装箇所を確認してみてください。

「.formErrorContent」「.formErrorArrow」あたりがデザイン調整で多くいじる部分になるかと思います。
こちらを調整したら、最後に表示される文言を調整します。文言は先ほども出てきた「jquery.validationEngine-ja.js」のファイルを開くと日本語で書かれた部分がありますので、そちらを調整します。

最後に

jsを利用したエラーチェックは、今回ご紹介した「jQuery Validation Engine」をはじめ様々なライブラリがありますが、最終ゴールはユーザが迷わないようにしてあげることです。
エラー表示のみだけではなく、デザイン、ラベルの文言、input typeの最適化、placeholderの記載など、細かい部分も含めて調整をかけましょう。
もちろん、jsだけではチェックできない項目もありますので、サーバサイドのエラーチェック、エラー時のデータ保持等々、ユーザがイライラしない入力フォームをつくることが大事です。