jQueryでフォームの入力をチェックするプラグイン
download
sample1
簡単なサンプル
sample1.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Validate</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").validate();
});
</script>
</head>
<body>
<form id="myform" method="POST" action="./index.html">
<input type="text" class="required" name="comment"/>
<input type="submit" />
</form>
</body>
</html>
何も入力していない場合は以下のようなエラーが表示される。
sample2
入力チェックの内容を指定する。
sample2.html
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").validate({
rules : {
comment: {
required: true,
minlength: 5
}
}
});
});
</script>
</head>
<body>
<form id="myform" method="POST" action="./index.html">
<input type="text" name="comment"/>
<input type="submit" />
</form>
</body>
</html>
文字数が５文字以下だと以下のようなエラーが表示される。
sample3
エラーメッセージを日本語にする。
sample3.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Validate</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myform").validate({
rules : {
comment: {
required: true,
minlength: 5
}
},
messages: {
comment: {
required: "コメントが未入力です",
minlength: $.format("{0}文字以上入力してください")
}
}
});
});
</script>
</head>
<body>
<form id="myform" method="POST" action="./index.html">
<input type="text" class="required" name="comment"/>
<input type="submit" />
</form>
</body>
</html>
エラーメッセージが日本語に!
sample4
エラーメッセージのスタイルを変更する。
エラーが発生するとclass属性に「error」が追加される。
↓エラー発生前
↓エラー発生後
以下のようなスタイルを適用すると
style.css
label.error {
color: red;
}
エラーメッセージが赤字に!
sample5
エラーメッセージの要素を変更する。
errClassとerrorElement属性値を使ってカスタマイズ可能。
script.js
$("#myform").validate({
rules : {
comment: {
required: true,
minlength: 5
}
},
messages: {
comment: {
required: "コメントが未入力です",
minlength: $.format("{0}文字以上入力してください")
}
},
errorClass: "myError",
errorElement: "h1"
});
スタイルも自由に設定できる。
style.css
h1.myError {
background-color: red;
}
