查看 | 历史 | 提交 | 提交对比
hjg
2024-07-09 30304784e82d4bba24121328da8eb8490aec4f4f
提交 | 用户 | 时间
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 &nbsp; as text for IE
110             label.html("&nbsp;").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">&nbsp;</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>