Webサイトのデモを作っていて、必須入力や形式チェックが必要になった。
簡単に組み込めそうなjQuery-Validation-Engineを使うことにした。
ブラウザはGoogle Chrome。
○参考にしたサイト
とりあえず、モノをダウンロードして、テキトーな場所に配置して動作確認をしたのだが、動かないorz
ハマった部分と対応と結果を書いていこうと思う。
jQueryを読み込む順番がアカン
何も考えず、jQueryを読み込んでいたせいでjquery.validationEngine.jsがエラーになっていた。
headで読み込んでいるのだが、それ自体が悪いわけじゃなさそう。
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script> <script src="js/languages/jquery.validationEngine-ja.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
jquery-1.8.2.min.jsを読み込む前にjquery.validationEngine.jsを読み込んでしまっている。
なので、ちゃんとした順番にした。
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script> <script src="js/languages/jquery.validationEngine-ja.js" type="text/javascript" charset="utf-8"></script>
まずはこれで1つ解決。
jQueryを重複して読み込んでいる！？
それでもjquery.validationEngine.jsのエラーが解消しない。
もう一回head要素を見直してみる。
jQueryを複数指定しているじゃないかorz
複数指定はダメですよ。
inputにidがない！？
一旦、スクリプトエラーがなくなり問題はなくなったかのうように見えたのだが、動かない。
具体的には必須チェックを入れた個所にエラーのポップアップが出ない。
<form id="formId"" method="post" action=""> 名前：<input type="text" name="sName" size="50" maxlength="50" placeholder="" class="validate[required] textArea"/> ・ ・ ・ ・ ・ </form>
問題はなさそうなのだが、どうやらinputにidを付けないと動かないという情報を入手したので、inputにidを全部つけた。
<form id="formId"" method="post" action=""> 名前：<input type="text" name="sName" id="sName" size="50" maxlength="50" placeholder="" class="validate[required] textArea"/> ・ ・ ・ ・ ・ </form>
それでも変わらず。
いくつかのデモを見たが、idが設定されていないデモの画面でもしっかりと動作していることが確認できた。
idは付けておいた方が良いが、動かない件とはとりあえず関係がなかったようだ。
そもそもJQueryが設定できていない！？
エラーは出ない。
つまり、記述は間違っていないが、読み込めていない可能性があった。
headで宣言しているところの記述を見直した。
修正前
<script type="text/javascript"> $(document).ready(function() { jQuery("#formId").validationEngine(); }); </script>
修正後
<script type="text/javascript"> jQuery(document).ready(function($){ jQuery("#formId").validationEngine(); }); </script>
これでやっと動いた。
参考にしたのはここ。
http://curious-everything.com/204-entry.htmlcurious-everything.com
＄を使わないで jQuery を呼び出し、その命令内で省略形を別名定義すればいい。
該当の命令をごっそり jQuery(document).ready(function($){}); で囲ってやればOKです。
上記のことを素直にやったら動いた。
もう、$なんてキライ。アメリカもキライ。
