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