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”
とすることで、メールアドレスであるか
チェックができる
