パソコンサポートの00H ～社長BLOG～

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

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

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

さて有名であるにもかかわらず、
古い情報しか見受けられなくて
『？？？』なトラブルだったので
どなたかのお役に立てれば…
（ここまで職人が丹精込めてコピペしました）

さて、ひょっとすると前からだったかもしれませんが、
実は jQuery.validationEngine には困った仕様があります。

form 要素の中にはそこにこんな値を入れて下さいね…
という placeholder という属性があります。
例えば以下のような感じ。

で、実は jQuery.validationEngine では
この placeholder と同じ値をフォームに入力すると
『入力してないよね？』とエラーが出ます。

これに『大阪府』と入力すると入力してください
と警告が出てしまいます。
で、なんかやらかしたっけ？
と悩んで一日つぶれたりします。

jQuery.validationEngine.js で
placeholder で検索をかけると
以下のようなところがあります。

default:
	var field_val      = $.trim( field.val()                               );
	var dv_placeholder = $.trim( field.attr("data-validation-placeholder") );
	var placeholder    = $.trim( field.attr("placeholder")                 );
	if (
		   ( !field_val                                    )
		|| ( dv_placeholder && field_val == dv_placeholder )
		|| ( placeholder    && field_val == placeholder    )
	) {
		return options.allrules[rules[i]].alertText;
	}
	break;

placeholder でこのような症状でお困りの場合は、
この赤の部分は不要ですので
削除またはコメントアウトしてかまいません。

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;
}

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

http://jquery.com/

私も不勉強でしたが、jQuery に 2.0 が登場しているようです。
jQuery というのは JavaScript のライブラリの一つで、
ブラウザ間の JavaScript の差異を吸収して、
共通の記述方法で動くようにしたものです。

まぁなんとなくでいいです（笑）。

この jQuery 等の JavaScript ライブラリは
固定的なコンテンツの表示が多い HTML や CSS に
動きを加えて表示させるときなどに使用します。
例えば画像がニュ～～～と出てくるようなものや
フォームの入力チェックなんかにも使えます。

で、この jQuery 2.0 ですが、

jQuery 2.x

jQuery 2.0 has the same API as jQuery 1.9, but does not support Internet Explorer 6, 7, or 8. All the notes in the jQuery 1.9 Upgrade Guide apply here as well. Since IE 6/7/8 are still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site. Please read the release notes carefully.

ということなんですね。

つまり InternetExplorer の 6 ～ 8 はサポートされていないそうです。
ちなみに WindowsXP は 8 までしかサポートされていないので、
WindowsXP ユーザは切り捨てられた感じです。

WindowsXP のサポートは来年四月まで。
そろそろ皆様も本格的に移行を考えていただきたいと思います。