実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery plugin: Validation | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
$("#commentForm").validate();
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "あなたの「名」を入力してください",
lastname: "あなたの「姓」を入力してください",
username: {
required: "「ユーザー名」を入力してください",
minlength: "「ユーザー名」は2文字以上で入力してください"
},
password: {
required: "「パスワード」を入力してください",
minlength: "「パスワード」は5文字以上で入力してください"
},
confirm_password: {
required: "「パスワード」を再入力してください",
minlength: "「パスワード」は5文字以上で入力してください",
equalTo: "パスワードが一致しません"
},
email: "正しい「メールアドレス】を入力してください",
agree: "プライバシーポリシーに同意してください"
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
});
</script>
<!-- CSS -->
<style type="text/css">
form { width:80%; }
fieldset { margin:10px; padding:10px; }
p { clear:both; margin:0; padding:0; overflow:hidden; }
label { width:20em; float:left; display:block; }
fieldset#newsletter_topics label { display:inline; width:auto; margin-right:10px; }
textarea, input.txt { margin-right:10px; width:20em; float:left; }
.error { color:#ff6699; white-space:nowrap; display:inline; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://bassistance.de/jquery-plugins/jquery-plugin-validation/'>jQuery plugin: Validation</a> | 設置サンプル</h1>
<!-- CODE -->
<form id="commentForm" method="get" action="">
<fieldset>
<legend>あなたの名前、メールアドレス、住所、コメントを入力してください</legend>
<p>
<label for="cname">名（必須、2文字以上）</label>
<input id="cname" name="name" class="txt required" minlength="2" />
<p>
<label for="cemail">メールアドレス（必須）</label>
<input id="cemail" name="email" class="txt required email" />
</p>
<p>
<label for="curl">URL（任意）</label>
<input id="curl" name="url" class="txt url" value="" />
</p>
<p>
<label for="ccomment">コメント（必須）</label>
<textarea id="ccomment" name="comment" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value=" 送信 "/>
</p>
</fieldset>
</form>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">名</label>
<input id="firstname" name="firstname" class="txt" />
</p>
<p>
<label for="lastname">姓</label>
<input id="lastname" name="lastname" class="txt" />
</p>
<p>
<label for="username">ユーザー名</label>
<input id="username" name="username" class="txt" />
</p>
<p>
<label for="password">パスワード</label>
<input id="password" name="password" type="password" class="txt" />
</p>
<p>
<label for="confirm_password">パスワード再入力</label>
<input id="confirm_password" name="confirm_password" type="password" class="txt" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" class="txt" />
</p>
<p>
<label for="agree">プライバシーポリシーに同意する</label>
<input type="checkbox" id="agree" name="agree" />
</p>
<p>
<label for="newsletter">メルマガ配信希望</label>
<input type="checkbox" id="newsletter" name="newsletter" />
</p>
<fieldset id="newsletter_topics">
<legend>メルマガ (2つ以上選択)</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="magazine1" name="topic" />
毎日３分・英作文しゃべれば英会話
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="magazine2" name="topic" />
3分からはじめよう！日常英会話
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="magazine3" name="topic" />
２パラグラフで英字新聞を読もう！
</label>
<label for="topic" class="error">2つ以上選択してください</label>
</fieldset>
<p>
<input class="submit" type="submit" value=" 送信 "/>
</p>
</fieldset>
</form>
<!-- / CODE -->
</div>
</body>
</html>