jQueryValidationの使い方

http://bassistance.de/jquery-plugins/jquery-plugin-validation/
からdownloadをクリックして
zipファイルをダウンロード

解凍したら
日本語メッセージに使うファイルが必要なため
localizationフォルダーの中にある
messages_ja.js
と

jQueryValidation本体になる
jquery.validate.min.js
が
distフォルダーにあるので、これらを
Webアプリのjsフォルダーにいれておく

次に、jQueryValidationでエラー表示のためのスタイルを設定するので
cssフォルダーの中へ
errorstyle.cssを作成する

書いているのは色の指定

//エラーメッセージを赤
from label.error{
color:red;
width:100%;
display:inline-block;
}

//エラーフィールドの色の指定
input.error{
background-color:#FFA0A0;
}

#FFA0A0は色の指定で
http://www.color-sample.com/colors/ffa0a0/
に実際の色が載っている

css関連については
ドットインストールで動画で紹介されているので参考にするとわかりやすい

http://dotinstall.com/lessons/basic_css_v2
を参考に

次に、jQueryValidationのライブラリーと
日本語メッセージの読みとり

これほ、単純にheadの中で

<script src="js/jquery.validate.min.js"></script>
<script src="messages_ja.js"></script>

で読み込むだけ

後、jQueryValidationを実行するJavascriptを作り、それを読み込む

$(document).on("pageinit","#main",function(e){
$("#comment").validate({});
});

これを
validate.jsとして、jsフォルダーへ保存し

<script src="js/validate.js"></script>

で読み込めばok

#commentはフォームのid
#mainは data-role=”page”のid

pageinitイベントで行っているのは
画面初期化時に
フォームに対してvalidateを実行すると
入力チェックが有効になるから

あと、Javascriptのインポートと
スタイル定義は
バリデーションしたいページじゃなくて
Webブラウザーから最初にアクセスされるjQueryMobileサイトのトップページに記述する必要がある

これは、2ページ目以降のアクセスだと
デフォルトではheadの中のJavascriptは読み込まれないから

あと、入力チェックには
HTMLで

<input type="text" name="userid" required/>

というように
required
を付けることで
必須チェックができる

type=”email”
とすることで、メールアドレスであるか
チェックができる

コメントを残す コメントをキャンセル