準備
下記サイトの”Downlords”より、jquery-validation-1.10.0.zipをダウンロードします。
URL：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
解凍するとdistフォルダの配下に"jquery.validate.min"が含まれているので、このファイルを適当なフォルダに配置します。
ソースコード
inputのクラス名にチェックしたい要素を指定し、イベント定義でバリデーション実行を行います。チェックが成功したときにコールバックされる関数をsubmitHandlerに定義します。
サンプルとして数値チェックのコードを次のように書きました。数値入力のtype属性をtextにしています。実行すると文字列を入力したときにちゃんと怒られました。
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no"/>
<meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
// イベント処理定義
$(document).on("pageinit", "#index", function(e){
// バリデーション実行
$("#sampleForm").validate({
submitHandler: function() {
alert("チェックOK");
}
});
});
</script>
<title>Hello World!</title>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<form id="sampleForm" method="get" action="">
<input type="text" class="number">
<input type="submit" value="チェック">
</form>
</div>
</div>
</body>
</html>
また、必須チェックを行うにはrequiredを指定します。
<input type="number" class="required number">
3文字以上、10文字以下といった文字列長の指定は次のように行います。
<input type="number" class="number" minlength="3" maxlength="10">
その他にも次の項目がチェックできます。
メールアドレス：
<input type="email" class="email">
URL：
<input type="url" class="url">
日付：
<input type="date" class="date">
入力文字を解析して整合性を検証する手間が省略できていいですね。
0 件のコメント:
コメントを投稿