提交 | 用户 | 时间
|
58d006
|
1 |
<!DOCTYPE html> |
A |
2 |
<html lang="en"> |
|
3 |
<head> |
|
4 |
<meta charset="utf-8"> |
|
5 |
<title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title> |
|
6 |
|
|
7 |
<link rel="stylesheet" href="milk.css" /> |
|
8 |
|
|
9 |
<script src="../../lib/jquery.js"></script> |
|
10 |
<script src="../../lib/jquery.mockjax.js"></script> |
|
11 |
<script src="../../jquery.validate.js"></script> |
|
12 |
|
|
13 |
<script> |
|
14 |
$(document).ready(function() { |
|
15 |
$.mockjax({ |
|
16 |
url: "emails.action", |
|
17 |
response: function(settings) { |
|
18 |
var email = settings.data.email, |
|
19 |
emails = ["glen@marketo.com", "george@bush.gov", "me@god.com", "aboutface@cooper.com", "steam@valve.com", "bill@gates.com"]; |
|
20 |
this.responseText = "true"; |
|
21 |
if ( $.inArray( email, emails ) !== -1 ) { |
|
22 |
this.responseText = "That's already taken."; |
|
23 |
} |
|
24 |
}, |
|
25 |
responseTime: 500 |
|
26 |
}); |
|
27 |
|
|
28 |
$.mockjax({ |
|
29 |
url: "users.action", |
|
30 |
response: function(settings) { |
|
31 |
var user = settings.data.username, |
|
32 |
users = ["asdf", "Peter", "Peter2", "George"]; |
|
33 |
this.responseText = "true"; |
|
34 |
if ( $.inArray( user, users ) !== -1 ) { |
|
35 |
this.responseText = "false"; |
|
36 |
} |
|
37 |
}, |
|
38 |
responseTime: 500 |
|
39 |
}); |
|
40 |
|
|
41 |
|
|
42 |
// validate signup form on keyup and submit |
|
43 |
var validator = $("#signupform").validate({ |
|
44 |
rules: { |
|
45 |
firstname: "required", |
|
46 |
lastname: "required", |
|
47 |
username: { |
|
48 |
required: true, |
|
49 |
minlength: 2, |
|
50 |
remote: "users.action" |
|
51 |
}, |
|
52 |
password: { |
|
53 |
required: true, |
|
54 |
minlength: 5 |
|
55 |
}, |
|
56 |
password_confirm: { |
|
57 |
required: true, |
|
58 |
minlength: 5, |
|
59 |
equalTo: "#password" |
|
60 |
}, |
|
61 |
email: { |
|
62 |
required: true, |
|
63 |
email: true, |
|
64 |
remote: "emails.action" |
|
65 |
}, |
|
66 |
dateformat: "required", |
|
67 |
terms: "required" |
|
68 |
}, |
|
69 |
messages: { |
|
70 |
firstname: "Enter your firstname", |
|
71 |
lastname: "Enter your lastname", |
|
72 |
username: { |
|
73 |
required: "Enter a username", |
|
74 |
minlength: jQuery.format("Enter at least {0} characters"), |
|
75 |
remote: jQuery.format("{0} is already in use") |
|
76 |
}, |
|
77 |
password: { |
|
78 |
required: "Provide a password", |
|
79 |
rangelength: jQuery.format("Enter at least {0} characters") |
|
80 |
}, |
|
81 |
password_confirm: { |
|
82 |
required: "Repeat your password", |
|
83 |
minlength: jQuery.format("Enter at least {0} characters"), |
|
84 |
equalTo: "Enter the same password as above" |
|
85 |
}, |
|
86 |
email: { |
|
87 |
required: "Please enter a valid email address", |
|
88 |
minlength: "Please enter a valid email address", |
|
89 |
remote: jQuery.format("{0} is already in use") |
|
90 |
}, |
|
91 |
dateformat: "Choose your preferred dateformat", |
|
92 |
terms: " " |
|
93 |
}, |
|
94 |
// the errorPlacement has to take the table layout into account |
|
95 |
errorPlacement: function(error, element) { |
|
96 |
if ( element.is(":radio") ) |
|
97 |
error.appendTo( element.parent().next().next() ); |
|
98 |
else if ( element.is(":checkbox") ) |
|
99 |
error.appendTo ( element.next() ); |
|
100 |
else |
|
101 |
error.appendTo( element.parent().next() ); |
|
102 |
}, |
|
103 |
// specifying a submitHandler prevents the default submit, good for the demo |
|
104 |
submitHandler: function() { |
|
105 |
alert("submitted!"); |
|
106 |
}, |
|
107 |
// set this class to error-labels to indicate valid fields |
|
108 |
success: function(label) { |
|
109 |
// set as text for IE |
|
110 |
label.html(" ").addClass("checked"); |
|
111 |
}, |
|
112 |
highlight: function(element, errorClass) { |
|
113 |
$(element).parent().next().find("." + errorClass).removeClass("checked"); |
|
114 |
} |
|
115 |
}); |
|
116 |
|
|
117 |
// propose username by combining first- and lastname |
|
118 |
$("#username").focus(function() { |
|
119 |
var firstname = $("#firstname").val(); |
|
120 |
var lastname = $("#lastname").val(); |
|
121 |
if(firstname && lastname && !this.value) { |
|
122 |
this.value = (firstname + "." + lastname).toLowerCase(); |
|
123 |
} |
|
124 |
}); |
|
125 |
|
|
126 |
}); |
|
127 |
</script> |
|
128 |
|
|
129 |
</head> |
|
130 |
<body> |
|
131 |
|
|
132 |
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1> |
|
133 |
<div id="main"> |
|
134 |
|
|
135 |
<div id="content"> |
|
136 |
|
|
137 |
<div id="header"> |
|
138 |
<div id="headerlogo"><img src="milk.png" alt="Remember The Milk" /></div> |
|
139 |
</div> |
|
140 |
<div style="clear: both;"><div></div></div> |
|
141 |
|
|
142 |
|
|
143 |
<div class="content"> |
|
144 |
<div id="signupbox"> |
|
145 |
<div id="signuptab"> |
|
146 |
<ul> |
|
147 |
<li id="signupcurrent"><a href=" ">Signup</a></li> |
|
148 |
</ul> |
|
149 |
</div> |
|
150 |
<div id="signupwrap"> |
|
151 |
<form id="signupform" autocomplete="off" method="get" action=""> |
|
152 |
<table> |
|
153 |
<tr> |
|
154 |
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td> |
|
155 |
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td> |
|
156 |
<td class="status"></td> |
|
157 |
</tr> |
|
158 |
<tr> |
|
159 |
<td class="label"><label id="llastname" for="lastname">Last Name</label></td> |
|
160 |
<td class="field"><input id="lastname" name="lastname" type="text" value="" maxlength="100" /></td> |
|
161 |
<td class="status"></td> |
|
162 |
</tr> |
|
163 |
<tr> |
|
164 |
<td class="label"><label id="lusername" for="username">Username</label></td> |
|
165 |
<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td> |
|
166 |
<td class="status"></td> |
|
167 |
</tr> |
|
168 |
<tr> |
|
169 |
<td class="label"><label id="lpassword" for="password">Password</label></td> |
|
170 |
<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td> |
|
171 |
<td class="status"></td> |
|
172 |
</tr> |
|
173 |
<tr> |
|
174 |
<td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm Password</label></td> |
|
175 |
<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td> |
|
176 |
<td class="status"></td> |
|
177 |
</tr> |
|
178 |
<tr> |
|
179 |
<td class="label"><label id="lemail" for="email">Email Address</label></td> |
|
180 |
<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td> |
|
181 |
<td class="status"></td> |
|
182 |
</tr> |
|
183 |
<tr> |
|
184 |
<td class="label"><label>Which Looks Right</label></td> |
|
185 |
<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;"> |
|
186 |
<table> |
|
187 |
<tbody> |
|
188 |
|
|
189 |
<tr> |
|
190 |
<td style="padding-right: 5px;"> |
|
191 |
<input id="dateformat_eu" name="dateformat" type="radio" value="0" /> |
|
192 |
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label> |
|
193 |
</td> |
|
194 |
<td style="padding-left: 5px;"> |
|
195 |
<input id="dateformat_am" name="dateformat" type="radio" value="1" /> |
|
196 |
<label id="ldateformat_am" for="dateformat_am">02/14/07</label> |
|
197 |
</td> |
|
198 |
<td> |
|
199 |
</td> |
|
200 |
</tr> |
|
201 |
</tbody> |
|
202 |
</table> |
|
203 |
</td> |
|
204 |
</tr> |
|
205 |
|
|
206 |
<tr> |
|
207 |
<td class="label"> </td> |
|
208 |
<td class="field" colspan="2"> |
|
209 |
<div id="termswrap"> |
|
210 |
<input id="terms" type="checkbox" name="terms" /> |
|
211 |
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label> |
|
212 |
</div> <!-- /termswrap --> |
|
213 |
</td> |
|
214 |
</tr> |
|
215 |
<tr> |
|
216 |
<td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td> |
|
217 |
<td class="field" colspan="2"> |
|
218 |
<input id="signupsubmit" name="signup" type="submit" value="Signup" /> |
|
219 |
</td> |
|
220 |
</tr> |
|
221 |
|
|
222 |
</table> |
|
223 |
</form> |
|
224 |
</div> |
|
225 |
</div> |
|
226 |
</div> |
|
227 |
|
|
228 |
</div> |
|
229 |
|
|
230 |
</div> |
|
231 |
|
|
232 |
</body> |
|
233 |
</html> |