Subversion-Projekte lars-tiefland.zeldi.de_alt

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

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