PluginProbe
RSVP and Event Management / 1.3.0
RSVP and Event Management v1.3.0
trunk 0.5.0 0.6.0 0.7.0 0.8.0 0.9.0 0.9.5 1.0.0 1.1.0 1.2.0 1.2.1 1.3.0 1.3.1 1.3.2 1.5.0 1.6.0 1.6.1 1.6.2 1.6.5 1.7.0 1.7.2 1.7.3 1.7.4 1.7.5 1.7.6 All 136 releases
rsvp / jquery-validate / demo / multipart / index.html

index.html in RSVP and Event Management 1.3.0, at jquery-validate/demo/multipart/index.html

413 lines 19.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 <head>
4
5 <title>jQuery accordion form with validation</title>
6
7 <link rel="stylesheet" href="../assets/demo_blue.css" type="text/css" />
8
9 <script type="text/javascript" src="../../lib/jquery.js"></script>
10 <script type="text/javascript" src="../../jquery.validate.js"></script>
11 <script type="text/javascript" src="js/jquery.maskedinput-1.0.js"></script>
12 <script type="text/javascript" src="js/ui.core.js"></script>
13 <script type="text/javascript" src="js/ui.accordion.js"></script>
14
15 <script type="text/javascript">
16 $(document).ready(function(){
17
18 $("#recordClientPhone").mask("(999) 999-9999");
19 $("#recordClientPhoneAlt").mask("(999) 999-9999");
20 $("#recordClientZip").mask("99999");
21 $("#recordPropertyZip").mask("99999");
22 $("#recordPurchaseZip").mask("99999");
23
24 // add * to required field labels
25 $('label.required').append('&nbsp;<strong>*</strong>&nbsp;');
26
27 // accordion functions
28 var accordion = $("#stepForm").accordion();
29 var current = 0;
30
31 $.validator.addMethod("pageRequired", function(value, element) {
32 var $element = $(element)
33 function match(index) {
34 return current == index && $(element).parents("#sf" + (index + 1)).length;
35 }
36 if (match(0) || match(1) || match(2)) {
37 return !this.optional(element);
38 }
39 return "dependency-mismatch";
40 }, $.validator.messages.required)
41
42 var v = $("#cmaForm").validate({
43 errorClass: "warning",
44 onkeyup: false,
45 onblur: false,
46 submitHandler: function() {
47 alert("Submitted, thanks!");
48 }
49 });
50
51 // back buttons do not need to run validation
52 $("#sf2 .prevbutton").click(function(){
53 accordion.accordion("activate", 0);
54 current = 0;
55 });
56 $("#sf3 .prevbutton").click(function(){
57 accordion.accordion("activate", 1);
58 current = 1;
59 });
60 // these buttons all run the validation, overridden by specific targets above
61 $(".open2").click(function() {
62 if (v.form()) {
63 accordion.accordion("activate", 2);
64 current = 2;
65 }
66 });
67 $(".open1").click(function() {
68 if (v.form()) {
69 accordion.accordion("activate", 1);
70 current = 1;
71 }
72 });
73 $(".open0").click(function() {
74 if (v.form()) {
75 accordion.accordion("activate", 0);
76 current = 0;
77 }
78 });
79
80 });
81 </script>
82
83 <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
84 </head>
85 <body>
86
87 <div id="wrap">
88 <div id="main">
89
90 <h1 class="top bottom"><span>Help me</span> Buy and Sell a House</h1>
91 <h2>This form is quick &amp; easy to complete - in only 3 steps!</h2>
92 <form name="cmaForm" id="cmaForm" method="post">
93 <input type="hidden" name="recordRequestPrimaryServiceID" id="recordRequestPrimaryServiceID" value="100" />
94 <input type="hidden" name="recordClientServices" id="recordClientServices" value="1,3" />
95 <ul id="stepForm" class="ui-accordion-container">
96 <li id="sf1"><a href='#' class="ui-accordion-link"> </a>
97 <div>
98 <fieldset><legend> Step 1 of 3 </legend>
99 <div class="requiredNotice">*Required Field</div>
100 <h3 class="stepHeader">Tell us about the property you're buying</h3>
101 <label for="recordPurchaseMetRealtor" class="input required">Are you currently working with a<br />
102 real estate agent? </label> &nbsp;&nbsp;No: <input name="recordPurchaseMetRealtor" type="radio" checked="checked" class="inputclass" value="0" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Yes: <input name="recordPurchaseMetRealtor" type="radio" class="inputclass pageRequired" value="1" title="Please choose Yes or No" />
103 <div class="formspacer"></div>
104 <label for="recordPurchaseTimeFrameID" class="input required">When would you like to move?</label> <select name="recordPurchaseTimeFrameID" id="recordPurchaseTimeFrameID" class="inputclass pageRequired" title="Select a Time Frame">
105 <option value="">-Select-</option>
106 <option value="1">Less than 3 months</option>
107 <option value="2">3-6 months</option>
108 <option value="3">6-9 months</option>
109 <option value="4">9-12 months</option>
110 <option value="5">Over 12 months</option>
111 </select> <br />
112 <label for="recordPurchasePriceRangeID" class="input required">Purchase price range:</label> <select name="recordPurchasePriceRangeID" id="recordPurchasePriceRangeID" class="inputclass pageRequired" title="Select a Price Range">
113 <option value="">-Select-</option>
114 <option value="1"></option>
115 <option value="2">$75,000 - $100,000</option>
116 <option value="3">$100,000 - $125,000</option>
117 <option value="4">$125,000 - $150,000</option>
118 <option value="5">$150,000 - $200,000</option>
119 <option value="6">$200,000 - $250,000</option>
120 <option value="7">$250,000 - $300,000</option>
121 <option value="8">$300,000 - $350,000</option>
122 <option value="9">$350,000 - $400,000</option>
123 <option value="10">$400,000 - $500,000</option>
124 <option value="11">$500,000 - $700,000</option>
125 <option value="12">$700,000 - $900,000</option>
126 <option value="13">> $900,000</option>
127 </select> <br />
128 <label for="recordPurchaseState" class="input required">State:</label> <select name="recordPurchaseState" id="recordPurchaseState" class="inputclass pageRequired" title="Select a State">
129 <option value="">-Select-</option>
130 <option value="AL">Alabama</option>
131 <option value="AK">Alaska</option>
132 <option value="AZ">Arizona</option>
133 <option value="AR">Arkansas</option>
134 <option value="CA">California</option>
135 <option value="CO">Colorado</option>
136 <option value="CT">Connecticut</option>
137 <option value="DE">Delaware</option>
138 <option value="DC">Dist of Columbia</option>
139 <option value="FL">Florida</option>
140 <option value="GA">Georgia</option>
141 <option value="HI">Hawaii</option>
142 <option value="ID">Idaho</option>
143 <option value="IL">Illinois</option>
144 <option value="IN">Indiana</option>
145 <option value="IA">Iowa</option>
146 <option value="KS">Kansas</option>
147 <option value="KY">Kentucky</option>
148 <option value="LA">Louisiana</option>
149 <option value="ME">Maine</option>
150 <option value="MD">Maryland</option>
151 <option value="MA">Massachusetts</option>
152 <option value="MI">Michigan</option>
153 <option value="MN">Minnesota</option>
154 <option value="MS">Mississippi</option>
155 <option value="MO">Missouri</option>
156 <option value="MT">Montana</option>
157 <option value="NE">Nebraska</option>
158 <option value="NV">Nevada</option>
159 <option value="NH">New Hampshire</option>
160 <option value="NJ">New Jersey</option>
161 <option value="NM">New Mexico</option>
162 <option value="NY">New York</option>
163 <option value="NC">North Carolina</option>
164 <option value="ND">North Dakota</option>
165 <option value="OH">Ohio</option>
166 <option value="OK">Oklahoma</option>
167 <option value="OR">Oregon</option>
168 <option value="PA" selected="selected">Pennsylvania</option>
169 <option value="RI">Rhode Island</option>
170 <option value="SC">South Carolina</option>
171 <option value="SD">South Dakota</option>
172 <option value="TN">Tennessee</option>
173 <option value="TX">Texas</option>
174 <option value="UT">Utah</option>
175 <option value="VT">Vermont</option>
176 <option value="VA">Virginia</option>
177 <option value="WA">Washington</option>
178 <option value="WV">West Virginia</option>
179 <option value="WI">Wisconsin</option>
180 <option value="WY">Wyoming</option>
181 </select> <br />
182
183 <label for="recordPurchasePropertyTypeID" class="input">Desired property type:</label> <select name="recordPurchasePropertyTypeID" id="recordPurchasePropertyTypeID" class="inputclass" title="Select a Property Type">
184 <option value="">-Select-</option>
185 <option value="1">Single Family Detached</option>
186 <option value="2">Condo</option>
187 <option value="3">Townhouse</option>
188 <option value="4">Rental</option>
189 <option value="5">Multi-Family</option>
190 <option value="6">Vacation Home</option>
191 <option value="7">Other</option>
192 </select> <br />
193 <div class="buttonWrapper"><input name="formNext1" type="button" class="open1 nextbutton" value="Next" alt="Next" title="Next" /></div>
194 </fieldset>
195 </div>
196 </li>
197 <li id="sf2">
198 <a href='#' class="ui-accordion-link">
199 </a>
200 <div>
201 <fieldset><legend> Step 2 of 3 </legend>
202 <div class="requiredNotice">*Required Field</div>
203 <h3 class="stepHeader">Tell us about the property you're selling</h3>
204 <label for="recordClientTimeFrameID" class="input required">When would you like to sell?</label> <select name="recordClientTimeFrameID" id="recordClientTimeFrameID" class="inputclass pageRequired" title="Select a Time Frame">
205 <option value="">-Select-</option>
206 <option value="1">Less than 3 months</option>
207 <option value="2">3-6 months</option>
208 <option value="3">6-9 months</option>
209 <option value="4">9-12 months</option>
210 <option value="5">Over 12 months</option>
211 </select> <br />
212 <label for="recordClientHomeTypeID" class="input required">Type of property you are selling:</label> <select name="recordClientHomeTypeID" id="recordClientHomeTypeID" class="inputclass pageRequired" title="Select a Property Type">
213 <option value="">-Select-</option>
214 <option value="1">Single Family Detached</option>
215 <option value="2">Condo</option>
216 <option value="3">Townhouse</option>
217 <option value="4">Rental</option>
218 <option value="5">Multi-Family</option>
219 <option value="6">Vacation Home</option>
220 <option value="7">Other</option>
221 </select> <br />
222 <label for="recordPropertyAddress1" class="input required">Property Street Address:</label> <input name="recordPropertyAddress1" id="recordPropertyAddress1" class="inputclass pageRequired" title="Street Address is required" maxlength="254" onblur="recordClientAddress1.value = this.value" /><br />
223 <label for="recordPropertyAddress2" class="input">Address (2):</label> <input name="recordPropertyAddress2" id="recordPropertyAddress2" class="inputclass" maxlength="254" onblur="recordClientAddress2.value = this.value" /><br />
224 <label for="recordPropertyCity" class="input required">City:</label> <input name="recordPropertyCity" id="recordPropertyCity" class="inputclass pageRequired" title="City is required" maxlength="254" onblur="recordClientCity.value = this.value" /><br />
225 <label for="recordPropertyState" class="input required">State:</label> <select name="recordPropertyState" id="recordPropertyState" class="inputclass pageRequired" title="Select a State" onchange="recordClientState.value = this.value">
226 <option value="">-Select-</option>
227 <option value="AL">Alabama</option>
228 <option value="AK">Alaska</option>
229 <option value="AZ">Arizona</option>
230 <option value="AR">Arkansas</option>
231 <option value="CA">California</option>
232 <option value="CO">Colorado</option>
233 <option value="CT">Connecticut</option>
234 <option value="DE">Delaware</option>
235 <option value="DC">Dist of Columbia</option>
236 <option value="FL">Florida</option>
237 <option value="GA">Georgia</option>
238 <option value="HI">Hawaii</option>
239 <option value="ID">Idaho</option>
240 <option value="IL">Illinois</option>
241 <option value="IN">Indiana</option>
242 <option value="IA">Iowa</option>
243 <option value="KS">Kansas</option>
244 <option value="KY">Kentucky</option>
245 <option value="LA">Louisiana</option>
246 <option value="ME">Maine</option>
247 <option value="MD">Maryland</option>
248 <option value="MA">Massachusetts</option>
249 <option value="MI">Michigan</option>
250 <option value="MN">Minnesota</option>
251 <option value="MS">Mississippi</option>
252 <option value="MO">Missouri</option>
253 <option value="MT">Montana</option>
254 <option value="NE">Nebraska</option>
255 <option value="NV">Nevada</option>
256 <option value="NH">New Hampshire</option>
257 <option value="NJ">New Jersey</option>
258 <option value="NM">New Mexico</option>
259 <option value="NY">New York</option>
260 <option value="NC">North Carolina</option>
261 <option value="ND">North Dakota</option>
262 <option value="OH">Ohio</option>
263 <option value="OK">Oklahoma</option>
264 <option value="OR">Oregon</option>
265 <option value="PA" selected="selected">Pennsylvania</option>
266 <option value="RI">Rhode Island</option>
267 <option value="SC">South Carolina</option>
268 <option value="SD">South Dakota</option>
269 <option value="TN">Tennessee</option>
270 <option value="TX">Texas</option>
271 <option value="UT">Utah</option>
272 <option value="VT">Vermont</option>
273 <option value="VA">Virginia</option>
274 <option value="WA">Washington</option>
275 <option value="WV">West Virginia</option>
276 <option value="WI">Wisconsin</option>
277 <option value="WY">Wyoming</option>
278 </select> <br />
279 <label for="recordPropertyZip" class="input required">Zip:</label> <input name="recordPropertyZip" id="recordPropertyZip" class="inputclass pageRequired" title="Zip Code is required" maxlength="254" onblur="recordClientZip.value = this.value" /><br />
280
281 <label for="recordClientPropertyValueID" class="input required">Estimated Market Value:</label> <select name="recordClientPropertyValueID" id="recordClientPropertyValueID" class="inputclass pageRequired" title="Select a Price Range">
282 <option value="">-Select-</option>
283 <option value="1">Less Than $75K</option>
284 <option value="2">$75-$100K</option>
285 <option value="3">$100-$125K</option>
286 <option value="4">$125-$150K</option>
287 <option value="5">$150-$200K</option>
288 <option value="6">$200-$250K</option>
289 <option value="7">$250-$300K</option>
290 <option value="8">$300-$350K</option>
291 <option value="9">$350-$400K</option>
292 <option value="10">$400-$500K</option>
293 <option value="11">$500-$700K</option>
294 <option value="12">$700-$900K</option>
295 <option value="13">Over $900K</option>
296 </select> <br />
297 <label for="recordPropertyBedroomsID" class="input">Bedrooms:</label> <select name="recordPropertyBedroomsID" id="recordPropertyBedroomsID" class="inputclass">
298 <option value="">-Select-</option>
299 <option value="1">1</option>
300 <option value="2">2</option>
301 <option value="3">3</option>
302 <option value="4">4</option>
303 <option value="5">5+</option>
304 </select> <br />
305 <label for="recordPropertyBathroomsId" class="input">Bathrooms:</label> <select name="recordPropertyBathroomsId" id="recordPropertyBathroomsId" class="inputclass">
306 <option value="">-Select-</option>
307 <option value="1">1</option>
308 <option value="2">1.5</option>
309 <option value="3">2</option>
310 <option value="4">2.5</option>
311 <option value="5">3</option>
312 <option value="6">3.5</option>
313 <option value="7">4+</option>
314 </select> <br />
315 <label for="recordPropertyAgeId" class="input">Approx. Age of Home:</label> <select name="recordPropertyAgeId" id="recordPropertyAgeId" class="inputclass">
316 <option value="">-Select-</option>
317 <option value="1">Less Than 1 year</option>
318 <option value="2">1-5 years</option>
319 <option value="3">6-10 years</option>
320 <option value="4">11-15 years</option>
321 <option value="5">More than 15 years</option>
322 </select> <br />
323 <label for="recordPropertySqFt" class="input">Approx. Square Footage:</label> <input name="recordPropertySqFt" id="recordPropertySqFt" class="inputclass" maxlength="254" /><br />
324 <div class="buttonWrapper"><input name="formBack0" type="button" class="open0 prevbutton" value="Back" alt="Back" title="Back" /> <input name="formNext2" type="button" class="open2 nextbutton" value="Next" alt="Next" title="Next" /></div>
325 </fieldset>
326 </div>
327 </li>
328 <li id="sf3">
329 <a href='#' class="ui-accordion-link">
330 </a>
331 <div>
332 <fieldset><legend> Step 3 of 3 </legend>
333 <div class="requiredNotice">*Required Field</div>
334 <h3 class="stepHeader">Tell us about yourself</h3>
335 <label for="recordClientNameFirst" class="input required">First Name:</label> <input name="recordClientNameFirst" id="recordClientNameFirst" class="inputclass pageRequired" title="First Name is required" maxlength="254" /> <br />
336 <label for="recordClientNameLast" class="input required">Last Name:</label> <input name="recordClientNameLast" id="recordClientNameLast" class="inputclass pageRequired" maxlength="254" title="Last Name is required" /> <br />
337 <label for="recordClientAddress1" class="input required">Current Address:</label> <input name="recordClientAddress1" id="recordClientAddress1" class="inputclass pageRequired" maxlength="254" title="Address is required" /> <br />
338 <label for="recordClientAddress2" class="input">Address (2):</label> <input name="recordClientAddress2" id="recordClientAddress2" class="inputclass" maxlength="254" /> <br />
339 <label for="recordClientCity" class="input required">City:</label> <input name="recordClientCity" id="recordClientCity" class="inputclass pageRequired" maxlength="254" title="City is required" /> <br />
340 <label for="recordClientState" class="input required">State:</label> <select name="recordClientState" id="recordClientState" class="inputclass pageRequired" title="Select a State">
341 <option value="">-Select-</option>
342 <option value="AL">Alabama</option>
343 <option value="AK">Alaska</option>
344 <option value="AZ">Arizona</option>
345 <option value="AR">Arkansas</option>
346 <option value="CA">California</option>
347 <option value="CO">Colorado</option>
348 <option value="CT">Connecticut</option>
349 <option value="DE">Delaware</option>
350 <option value="DC">Dist of Columbia</option>
351 <option value="FL">Florida</option>
352 <option value="GA">Georgia</option>
353 <option value="HI">Hawaii</option>
354 <option value="ID">Idaho</option>
355 <option value="IL">Illinois</option>
356 <option value="IN">Indiana</option>
357 <option value="IA">Iowa</option>
358 <option value="KS">Kansas</option>
359 <option value="KY">Kentucky</option>
360 <option value="LA">Louisiana</option>
361 <option value="ME">Maine</option>
362 <option value="MD">Maryland</option>
363 <option value="MA">Massachusetts</option>
364 <option value="MI">Michigan</option>
365 <option value="MN">Minnesota</option>
366 <option value="MS">Mississippi</option>
367 <option value="MO">Missouri</option>
368 <option value="MT">Montana</option>
369 <option value="NE">Nebraska</option>
370 <option value="NV">Nevada</option>
371 <option value="NH">New Hampshire</option>
372 <option value="NJ">New Jersey</option>
373 <option value="NM">New Mexico</option>
374 <option value="NY">New York</option>
375 <option value="NC">North Carolina</option>
376 <option value="ND">North Dakota</option>
377 <option value="OH">Ohio</option>
378 <option value="OK">Oklahoma</option>
379 <option value="OR">Oregon</option>
380 <option value="PA" selected="selected">Pennsylvania</option>
381 <option value="RI">Rhode Island</option>
382 <option value="SC">South Carolina</option>
383 <option value="SD">South Dakota</option>
384 <option value="TN">Tennessee</option>
385 <option value="TX">Texas</option>
386 <option value="UT">Utah</option>
387 <option value="VT">Vermont</option>
388 <option value="VA">Virginia</option>
389 <option value="WA">Washington</option>
390 <option value="WV">West Virginia</option>
391 <option value="WI">Wisconsin</option>
392 <option value="WY">Wyoming</option>
393 </select> <br />
394 <label for="recordClientZip" class="input required">Zip:</label> <input name="recordClientZip" id="recordClientZip" class="inputclass pageRequired" maxlength="12" title="Zip Code is required" /> <br />
395 <label for="recordClientPhone" class="input required">Phone Number:</label> <input name="recordClientPhone" id="recordClientPhone" class="inputclass pageRequired" maxlength="254" title="Phone Number is required" /> <br />
396 <label for="recordClientPhoneAlt" class="input">Alternate Number:</label> <input name="recordClientPhoneAlt" id="recordClientPhoneAlt" class="inputclass" maxlength="254" /> <br />
397 <label for="recordClientEmail" class="input required">Email Address:</label> <input name="recordClientEmail" id="recordClientEmail" class="inputclass pageRequired email" maxlength="254" title="Email address is required" /> <br />
398 <label for="recordClientEmail1" class="input required">Confirm Email:</label> <input name="recordClientEmail1" id="recordClientEmail1" class="inputclass pageRequired" equalTo:"'#recordClientEmail" maxlength="254" title="Please confirm your email address" /> <br />
399 <br />
400 <p class="formDisclaimer">This is a sample form, no information is sent anywhere.</p>
401 <div class="buttonWrapper"><input name="formBack1" type="button" class="open1 prevbutton" value="Back" alt="Back" title="Back" /> <input name="submit" type="submit" id="submit" value="Submit" class="submitbutton" alt="Submit" title="Submit"></div>
402 </fieldset>
403 </div>
404 </li>
405 </ul>
406 </form>
407
408 </div>
409 </div>
410
411 </body>
412 </html>
413