查看 | 历史 | 提交 | 提交对比
hjg
2024-10-30 8cf23534166c07e711aac2a25911ada317ba01f0
提交 | 用户 | 时间
58d006 1 <!DOCTYPE html>
A 2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>jQuery validation plug-in - main demo</title>
6
7 <link rel="stylesheet" href="css/screen.css" />
8
9 <script src="../lib/jquery.js"></script>
10 <script src="../jquery.validate.js"></script>
11
12 <script>
13 $.validator.setDefaults({
14     submitHandler: function() { alert("submitted!"); }
15 });
16
17 $().ready(function() {
18     // validate the comment form when it is submitted
19     $("#commentForm").validate();
20
21     // validate signup form on keyup and submit
22     $("#signupForm").validate({
23         rules: {
24             firstname: "required",
25             lastname: "required",
26             username: {
27                 required: true,
28                 minlength: 2
29             },
30             password: {
31                 required: true,
32                 minlength: 5
33             },
34             confirm_password: {
35                 required: true,
36                 minlength: 5,
37                 equalTo: "#password"
38             },
39             email: {
40                 required: true,
41                 email: true
42             },
43             topic: {
44                 required: "#newsletter:checked",
45                 minlength: 2
46             },
47             agree: "required"
48         },
49         messages: {
50             firstname: "Please enter your firstname",
51             lastname: "Please enter your lastname",
52             username: {
53                 required: "Please enter a username",
54                 minlength: "Your username must consist of at least 2 characters"
55             },
56             password: {
57                 required: "Please provide a password",
58                 minlength: "Your password must be at least 5 characters long"
59             },
60             confirm_password: {
61                 required: "Please provide a password",
62                 minlength: "Your password must be at least 5 characters long",
63                 equalTo: "Please enter the same password as above"
64             },
65             email: "Please enter a valid email address",
66             agree: "Please accept our policy"
67         }
68     });
69
70     // propose username by combining first- and lastname
71     $("#username").focus(function() {
72         var firstname = $("#firstname").val();
73         var lastname = $("#lastname").val();
74         if(firstname && lastname && !this.value) {
75             this.value = firstname + "." + lastname;
76         }
77     });
78
79     //code to hide topic selection, disable for demo
80     var newsletter = $("#newsletter");
81     // newsletter topics are optional, hide at first
82     var inital = newsletter.is(":checked");
83     var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
84     var topicInputs = topics.find("input").attr("disabled", !inital);
85     // show when newsletter is checked
86     newsletter.click(function() {
87         topics[this.checked ? "removeClass" : "addClass"]("gray");
88         topicInputs.attr("disabled", !this.checked);
89     });
90 });
91 </script>
92
93 <style type="text/css">
94 #commentForm { width: 500px; }
95 #commentForm label { width: 250px; }
96 #commentForm label.error, #commentForm input.submit { margin-left: 253px; }
97 #signupForm { width: 670px; }
98 #signupForm label.error {
99     margin-left: 10px;
100     width: auto;
101     display: inline;
102 }
103 #newsletter_topics label.error {
104     display: none;
105     margin-left: 103px;
106 }
107 </style>
108
109 </head>
110 <body>
111
112 <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
113 <div id="main">
114
115 <p>Default submitHandler is set to display an alert into of submitting the form</p>
116
117 <form class="cmxform" id="commentForm" method="get" action="">
118     <fieldset>
119         <legend>Please provide your name, email address (won't be published) and a comment</legend>
120         <p>
121             <label for="cname">Name (required, at least 2 characters)</label>
122             <input id="cname" name="name" minlength="2" type="text" required />
123         <p>
124             <label for="cemail">E-Mail (required)</label>
125             <input id="cemail" type="email" name="email" required />
126         </p>
127         <p>
128             <label for="curl">URL (optional)</label>
129             <input id="curl" type="url" name="url" />
130         </p>
131         <p>
132             <label for="ccomment">Your comment (required)</label>
133             <textarea id="ccomment" name="comment" required></textarea>
134         </p>
135         <p>
136             <input class="submit" type="submit" value="Submit"/>
137         </p>
138     </fieldset>
139 </form>
140
141 <form class="cmxform" id="signupForm" method="get" action="">
142     <fieldset>
143         <legend>Validating a complete form</legend>
144         <p>
145             <label for="firstname">Firstname</label>
146             <input id="firstname" name="firstname" type="text" />
147         </p>
148         <p>
149             <label for="lastname">Lastname</label>
150             <input id="lastname" name="lastname" type="text" />
151         </p>
152         <p>
153             <label for="username">Username</label>
154             <input id="username" name="username" type="text" />
155         </p>
156         <p>
157             <label for="password">Password</label>
158             <input id="password" name="password" type="password" />
159         </p>
160         <p>
161             <label for="confirm_password">Confirm password</label>
162             <input id="confirm_password" name="confirm_password" type="password" />
163         </p>
164         <p>
165             <label for="email">Email</label>
166             <input id="email" name="email" type="email" />
167         </p>
168         <p>
169             <label for="agree">Please agree to our policy</label>
170             <input type="checkbox" class="checkbox" id="agree" name="agree" />
171         </p>
172         <p>
173             <label for="newsletter">I'd like to receive the newsletter</label>
174             <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
175         </p>
176         <fieldset id="newsletter_topics">
177             <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
178             <label for="topic_marketflash">
179                 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
180                 Marketflash
181             </label>
182             <label for="topic_fuzz">
183                 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
184                 Latest fuzz
185             </label>
186             <label for="topic_digester">
187                 <input type="checkbox" id="topic_digester" value="digester" name="topic" />
188                 Mailing list digester
189             </label>
190             <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
191         </fieldset>
192         <p>
193             <input class="submit" type="submit" value="Submit"/>
194         </p>
195     </fieldset>
196 </form>
197
198 <h3>Synthetic examples</h3>
199 <ul>
200     <li><a href="errorcontainer-demo.html">Error message containers in action</a></li>
201     <li><a href="custom-messages-data-demo.html">Custom Messages as Element Data</a></li>
202     <li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li>
203     <li><a href="ajaxSubmit-integration-demo.html">Integration with Form Plugin (AJAX submit)</a></li>
204     <li><a href="custom-methods-demo.html">Custom methods and message display.</a></li>
205     <li><a href="dynamic-totals.html">Dynamic forms</a></li>
206     <li><a href="themerollered.html">Forms styled with jQuery UI Themeroller</a></li>
207     <li><a href="tinymce/">TinyMCE Demo</a></li>
208     <li><a href="file_input.html">File inputs</a></li>
209     <li><a href="jquerymobile.html">jQuery Mobile Form Validation</a></li>
210 </ul>
211 <h3>Real-world examples</h3>
212 <ul>
213     <li><a href="milk/">Remember The Milk signup form</a></li>
214     <li><a href="marketo/">Marketo signup form</a></li>
215     <li><a href="multipart/">Buy and Sell a House multipart form</a></li>
216     <li><a href="captcha/">Remote captcha validation</a></li>
217 </ul>
218
219 <h3>Testsuite</h3>
220 <ul>
221     <li><a href="../test/">Validation Testsuite</a></li>
222 </ul>
223
224 </div>
225
226
227 </body>
228 </html>