[jQuery] フォームに入力規則を付ける

この記事は2年以上前の投稿になります。
記載された情報が古くなっている可能性がございますので十分ご注意ください。

jQueryを使って、簡単に入力規則を埋め込むことができます。

まずはjQuery本体とプラグイン(Validation Plugin)をダウンロードしておきます。

• jQuery本体
  ※記載当時の最新は1.7.2でした。「Minified」を選択します。
• jQuery プラグイン(Validation Plugin)
  ※記載当時の最新は1.9.0でした。「jquery.validate.min.js」を選択します。

ダウンロードしたら、呼び出し用のタグを埋め込みます。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

あとは、入力フォーム毎の入力規則定義を記載します。

$(function(){
	$("form").validate({
		rules: {
			point :{
				number: true,
				max: 100,
				min: 0,
			},
		},
		messages: {
			point :{
				number: "数字を入力してください",
				max: "100以内で入力してください",
				min: "0以上で入力してください",
			},
		}
	});
})

こんな感じで動作します。