提交 | 用户 | 时间
|
58d006
|
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
A |
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 |
<head> |
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> |
|
5 |
<title>Test for jQuery validate() plugin</title> |
|
6 |
|
|
7 |
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> |
|
8 |
<script src="../lib/jquery.js" type="text/javascript"></script> |
|
9 |
<script src="../lib/jquery.metadata.js" type="text/javascript"></script> |
|
10 |
<script src="../lib/jquery.ajaxQueue.js" type="text/javascript"></script> |
|
11 |
<script src="../jquery.validate.js" type="text/javascript"></script> |
|
12 |
|
|
13 |
<script type="text/javascript"> |
|
14 |
$().ready(function() { |
|
15 |
$("#commentForm").validate(); |
|
16 |
}); |
|
17 |
</script> |
|
18 |
|
|
19 |
<style type="text/css"> |
|
20 |
#commentForm { width: 500px; } |
|
21 |
#commentForm label { width: 250px; display: block; float: left; } |
|
22 |
#commentForm label.error, #commentForm input.submit { margin-left: 253px; } |
|
23 |
.focus { background-color: red; } |
|
24 |
</style> |
|
25 |
|
|
26 |
</head> |
|
27 |
<body> |
|
28 |
<form class="cmxform" id="commentForm" method="get" action=""> |
|
29 |
<fieldset> |
|
30 |
<legend>A simple comment form with submit validation and default messages</legend> |
|
31 |
<p> |
|
32 |
<label for="cname-x0">Name (required, at least 2 characters)</label> |
|
33 |
<input id="cname-x0" name="name-x0" class="some other styles {required:true,minLength:2}" /> |
|
34 |
<p> |
|
35 |
<label for="cemail-x0">E-Mail (required)</label> |
|
36 |
<input id="cemail-x0" name="email-x0" class="{required:true,email:true}" /> |
|
37 |
</p> |
|
38 |
<p> |
|
39 |
<label for="curl-x0">URL (optional)</label> |
|
40 |
<input id="curl-x0" name="url-x0" class="{url:true}" value="" /> |
|
41 |
</p> |
|
42 |
<p> |
|
43 |
<label for="ccomment-x0">Your comment (required)</label> |
|
44 |
<textarea id="ccomment-x0" name="comment-x0" class="{required:true}"></textarea> |
|
45 |
</p> |
|
46 |
<p> |
|
47 |
<label for="cname-x1">Name (required, at least 2 characters)</label> |
|
48 |
<input class="some other styles {required:true,minLength:2}" name="name-x1" id="cname-x1"/> |
|
49 |
</p><p> |
|
50 |
<label for="cemail-x1">E-Mail (required)</label> |
|
51 |
<input class="{required:true,email:true}" name="email-x1" id="cemail-x1"/> |
|
52 |
</p> |
|
53 |
<p> |
|
54 |
<label for="curl-x1">URL (optional)</label> |
|
55 |
<input value="" class="{url:true}" name="url-x1" id="curl-x1"/> |
|
56 |
</p> |
|
57 |
<p> |
|
58 |
<label for="ccomment-x1">Your comment (required)</label> |
|
59 |
<textarea class="{required:true}" name="comment-x1" id="ccomment-x1"></textarea> |
|
60 |
</p> |
|
61 |
<p> |
|
62 |
<label for="cname-x2">Name (required, at least 2 characters)</label> |
|
63 |
<input class="some other styles {required:true,minLength:2}" name="name-x2" id="cname-x2"/> |
|
64 |
</p><p> |
|
65 |
<label for="cemail-x2">E-Mail (required)</label> |
|
66 |
<input class="{required:true,email:true}" name="email-x2" id="cemail-x2"/> |
|
67 |
</p> |
|
68 |
<p> |
|
69 |
<label for="curl-x2">URL (optional)</label> |
|
70 |
<input value="" class="{url:true}" name="url-x2" id="curl-x2"/> |
|
71 |
</p> |
|
72 |
<p> |
|
73 |
<label for="ccomment-x2">Your comment (required)</label> |
|
74 |
<textarea class="{required:true}" name="comment-x2" id="ccomment-x2"></textarea> |
|
75 |
</p> |
|
76 |
<p> |
|
77 |
<label for="cname-x3">Name (required, at least 2 characters)</label> |
|
78 |
<input class="some other styles {required:true,minLength:2}" name="name-x3" id="cname-x3"/> |
|
79 |
</p><p> |
|
80 |
<label for="cemail-x3">E-Mail (required)</label> |
|
81 |
<input class="{required:true,email:true}" name="email-x3" id="cemail-x3"/> |
|
82 |
</p> |
|
83 |
<p> |
|
84 |
<label for="curl-x3">URL (optional)</label> |
|
85 |
<input value="" class="{url:true}" name="url-x3" id="curl-x3"/> |
|
86 |
</p> |
|
87 |
<p> |
|
88 |
<label for="ccomment-x3">Your comment (required)</label> |
|
89 |
<textarea class="{required:true}" name="comment-x3" id="ccomment-x3"></textarea> |
|
90 |
</p> |
|
91 |
<p> |
|
92 |
<label for="cname-x4">Name (required, at least 2 characters)</label> |
|
93 |
<input class="some other styles {required:true,minLength:2}" name="name-x4" id="cname-x4"/> |
|
94 |
</p><p> |
|
95 |
<label for="cemail-x4">E-Mail (required)</label> |
|
96 |
<input class="{required:true,email:true}" name="email-x4" id="cemail-x4"/> |
|
97 |
</p> |
|
98 |
<p> |
|
99 |
<label for="curl-x4">URL (optional)</label> |
|
100 |
<input value="" class="{url:true}" name="url-x4" id="curl-x4"/> |
|
101 |
</p> |
|
102 |
<p> |
|
103 |
<label for="ccomment-x4">Your comment (required)</label> |
|
104 |
<textarea class="{required:true}" name="comment-x4" id="ccomment-x4"></textarea> |
|
105 |
</p> |
|
106 |
<p> |
|
107 |
<label for="cname-x5">Name (required, at least 2 characters)</label> |
|
108 |
<input class="some other styles {required:true,minLength:2}" name="name-x5" id="cname-x5"/> |
|
109 |
</p><p> |
|
110 |
<label for="cemail-x5">E-Mail (required)</label> |
|
111 |
<input class="{required:true,email:true}" name="email-x5" id="cemail-x5"/> |
|
112 |
</p> |
|
113 |
<p> |
|
114 |
<label for="curl-x5">URL (optional)</label> |
|
115 |
<input value="" class="{url:true}" name="url-x5" id="curl-x5"/> |
|
116 |
</p> |
|
117 |
<p> |
|
118 |
<label for="ccomment-x5">Your comment (required)</label> |
|
119 |
<textarea class="{required:true}" name="comment-x5" id="ccomment-x5"></textarea> |
|
120 |
</p> |
|
121 |
<p> |
|
122 |
<label for="cname-x6">Name (required, at least 2 characters)</label> |
|
123 |
<input class="some other styles {required:true,minLength:2}" name="name-x6" id="cname-x6"/> |
|
124 |
</p><p> |
|
125 |
<label for="cemail-x6">E-Mail (required)</label> |
|
126 |
<input class="{required:true,email:true}" name="email-x6" id="cemail-x6"/> |
|
127 |
</p> |
|
128 |
<p> |
|
129 |
<label for="curl-x6">URL (optional)</label> |
|
130 |
<input value="" class="{url:true}" name="url-x6" id="curl-x6"/> |
|
131 |
</p> |
|
132 |
<p> |
|
133 |
<label for="ccomment-x6">Your comment (required)</label> |
|
134 |
<textarea class="{required:true}" name="comment-x6" id="ccomment-x6"></textarea> |
|
135 |
</p> |
|
136 |
<p> |
|
137 |
<label for="cname-x7">Name (required, at least 2 characters)</label> |
|
138 |
<input class="some other styles {required:true,minLength:2}" name="name-x7" id="cname-x7"/> |
|
139 |
</p><p> |
|
140 |
<label for="cemail-x7">E-Mail (required)</label> |
|
141 |
<input class="{required:true,email:true}" name="email-x7" id="cemail-x7"/> |
|
142 |
</p> |
|
143 |
<p> |
|
144 |
<label for="curl-x7">URL (optional)</label> |
|
145 |
<input value="" class="{url:true}" name="url-x7" id="curl-x7"/> |
|
146 |
</p> |
|
147 |
<p> |
|
148 |
<label for="ccomment-x7">Your comment (required)</label> |
|
149 |
<textarea class="{required:true}" name="comment-x7" id="ccomment-x7"></textarea> |
|
150 |
</p> |
|
151 |
<p> |
|
152 |
<label for="cname-x8">Name (required, at least 2 characters)</label> |
|
153 |
<input class="some other styles {required:true,minLength:2}" name="name-x8" id="cname-x8"/> |
|
154 |
</p><p> |
|
155 |
<label for="cemail-x8">E-Mail (required)</label> |
|
156 |
<input class="{required:true,email:true}" name="email-x8" id="cemail-x8"/> |
|
157 |
</p> |
|
158 |
<p> |
|
159 |
<label for="curl-x8">URL (optional)</label> |
|
160 |
<input value="" class="{url:true}" name="url-x8" id="curl-x8"/> |
|
161 |
</p> |
|
162 |
<p> |
|
163 |
<label for="ccomment-x8">Your comment (required)</label> |
|
164 |
<textarea class="{required:true}" name="comment-x8" id="ccomment-x8"></textarea> |
|
165 |
</p> |
|
166 |
<p> |
|
167 |
<label for="cname-x9">Name (required, at least 2 characters)</label> |
|
168 |
<input class="some other styles {required:true,minLength:2}" name="name-x9" id="cname-x9"/> |
|
169 |
</p><p> |
|
170 |
<label for="cemail-x9">E-Mail (required)</label> |
|
171 |
<input class="{required:true,email:true}" name="email-x9" id="cemail-x9"/> |
|
172 |
</p> |
|
173 |
<p> |
|
174 |
<label for="curl-x9">URL (optional)</label> |
|
175 |
<input value="" class="{url:true}" name="url-x9" id="curl-x9"/> |
|
176 |
</p> |
|
177 |
<p> |
|
178 |
<label for="ccomment-x9">Your comment (required)</label> |
|
179 |
<textarea class="{required:true}" name="comment-x9" id="ccomment-x9"></textarea> |
|
180 |
</p> |
|
181 |
<p> |
|
182 |
<input class="submit" type="submit" value="Submit"/> |
|
183 |
</p> |
|
184 |
</fieldset> |
|
185 |
</form> |
|
186 |
|
|
187 |
</body> |
|
188 |
</html> |