Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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