エプソンダイレクト株式会社
Home > 2021年4月24日(土曜日)

2021年4月24日(土曜日)

jQuery.validationEngine v3.1.0 のあれこれ ~その 1 ~

Category: ホームページ制作 | Posted By at 18:56:31

GitHub – posabsolute/jQuery-Validation-Engine: jQuery form validation plugin

昔から何度も使っていたのですが、
久々に触るとだいぶ変わっているようです。

jQuery.validationEngine は
ホームページのフォームの
記入漏れをチェックするための
jQuery ライブラリです。

さて有名であるにもかかわらず、
古い情報しか見受けられなくて
『???』なトラブルだったので
どなたかのお役に立てれば…

まず設置のための書き方ですが、

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

こんな感じで書くのですが、大事なのは

jquery.validationEngine-ja.js
jquery.validationEngine.js

の順番。
以前は逆だったと思うのですが、
今はこの順番でないと動きません。

もちろん

$(function(){
    $( "フォームの ID 等" ).validationEngine();
});

も忘れないように。

また jQuery のバージョンが 3 以降では動かない
という情報もありましたが、現在は対応しています。

あとマイナーかもしれませんが、
恐らくバグだと思うのですが、
フォームのレイアウトを table タグでしている場合は
チェック後のエラーメッセージが変なところに出ます。

スタイルシートの設定で

#フォームの ID td {
    position: relative;
}

のようにしておく必要があります。

HP Directplus -HP公式オンラインストア- デル株式会社 東芝ダイレクト 富士通パソコンFMVの直販サイト富士通 WEB MART ソフマップ・ドットコム