2017

tips

フォ－ムの入力チェックに最適！「jQuery-Validation-Engine-rails」

問い合わせフォーム内の「必須項目」欄に設定する「入力チェック(バリデーション)」を行うスクリプトはたくさんあります。
その中でも個人的に一番設置が簡単で、かつ見た目も見やすい、
「jQuery-Validation-Engine-rails」の設置方法をご紹介します。

ファイルをダウンロードする

https://github.com/posabsolute/jQuery-Validation-Engine

こちらから以下のファイルをダウンロードします。

/js/jquery-1.7.2.min.js
/js/jquery.validationEngine.js
/js/languages/jquery.validationEngine-ja.js
/css/validationEngine.jquery.css

基本的にはvalidationEngine.jsとvalidationEngine.jquery.cssだけで大丈夫ですが、
このままですとエラー文が英語になっています。
というわけで、validationEngine-ja.jsも入れておいた方が無難ですね。これを入れると日本語化されます。

htmlに設置する

上記のファイルをHTMLファイルの<head>内に設置します。

</>html

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-ja.js" type="text/javascript"></script>

その後jQueryも下記のように設置します。
<form>に名前をつけて、jQueryで参照する形です。
今回は#form_1としました。

{;}jQuery

　$(function(){
      jQuery("#form_1").validationEngine();
  });

<form>に先程つけた名前をidとして入れます。
更に、必須にしたい項目(ここでは<input>)にclass="validate[required]"を入れます。
validateの後ろについている[]ですが、「validate[バリデートの種類]」という感じになっています。

</>html

<form id="form_1" name="" post="">
    <input type="text" name="name" class="validate[required]">
    <input type="text" name="name2" class="validate[required]">
</form>

テキストボックス以外にも、ラジオボタン、チェックボックス、プルダウン
などでも同様に指定することができます。

バリデートには他にも種類がありますが、あんまり使わないかなーと思ったので今回は割愛します。
入力されているか、されていないかだけのチェックでしたらvalidate[required]だけで大丈夫かなーと。

さて、これでほぼ完成！といきたいところですが、レスポンシブサイトの場合、
スマホで見ると吹き出しの場所がはみ出してしまいます。
今回この記事を書いたのは、この設定を忘れないようにしなければ、と思ったからです…
ということで位置調整をします。

レスポンシブサイト用に位置を調整する

</>html

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

こんな感じで、data-prompt-positionを追加すると位置の調整が可能になります。
レスポンシブで制作している際に役に立つんですよね。
今回はinlineにして、テキストボックスのすぐ下に表示されるようにしました。

ちなみに、ですが、以下のようにスクリプト内に指示を入れてしまえば一括で指定できます。こっちの方が楽かな…。

{;}jQuery

　$(function(){
  $('#form_1').validationEngine({
    promptPosition: "inline"
  })
})

完成！

レスポンシブにも対応し、これで無事入力アラートが表示されるようになりました。
デフォルトの状態では、ポップアップの位置が右上にあり、吹き出しデザインになっていますが、
validationEngine.jquery.css内でcssの変更ができます。(※validationEngine.jquery.cssの43行辺りに.formError .formErrorContentがあるので探してみてください。)
それぞれのwebサイトに合ったデザインにできますよ。

設置方法を紹介されている記事はいくつかありましたが、位置の調整も同時に教えてくれる記事がないように感じたので、今回はまとめてみました。

バリデーション実行時の横スクロール停止

追記です。実際に「jQuery-Validation-Engine-rails」を使用していると、とある問題に直面しました。バリデーションが実行されると、エラーが出ている項目までスクロールしてくれる便利な機能があります。
しかし、縦スクロールだけではなく、横にもスクロールされませんか？

この機能、表示が崩れるので正直いらないかな、と思います。
縦スクロールは便利なので、そのまま残すとして、
横スクロールは発動させないように、少し設定を変更しました。

最初に設定したjquery.validationEngine.jsというjsファイルの438行目、
以下の部分をコメントアウトします。

{;}jQuery

438||   $("html, body").animate({scrollLeft: fixleft},1100)

{;}jQuery

438||   //$("html, body").animate({scrollLeft: fixleft},1100)

これで、縦スクロールのみが発動されるようになりました。