rsvp / jquery-validate / demo / milk / index.html

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

235 lines 7.3 KB

Raw Download Zip

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>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title>
6
7	<link rel="stylesheet" type="text/css" media="screen" href="milk.css" />
8	<link rel="stylesheet" type="text/css" media="screen" href="../css/chili.css" />
9
10	<script src="../../lib/jquery.js" type="text/javascript"></script>
11	<script src="../../jquery.validate.js" type="text/javascript"></script>
12
13	<style type="text/css">
14	pre { text-align: left; }
15	</style>
16
17	<script id="demo" type="text/javascript">
18	$(document).ready(function() {
19	// validate signup form on keyup and submit
20	var validator = $("#signupform").validate({
21	rules: {
22	firstname: "required",
23	lastname: "required",
24	username: {
25	required: true,
26	minlength: 2,
27	remote: "users.php"
28	},
29	password: {
30	required: true,
31	minlength: 5
32	},
33	password_confirm: {
34	required: true,
35	minlength: 5,
36	equalTo: "#password"
37	},
38	email: {
39	required: true,
40	email: true,
41	remote: "emails.php"
42	},
43	dateformat: "required",
44	terms: "required"
45	},
46	messages: {
47	firstname: "Enter your firstname",
48	lastname: "Enter your lastname",
49	username: {
50	required: "Enter a username",
51	minlength: jQuery.format("Enter at least {0} characters"),
52	remote: jQuery.format("{0} is already in use")
53	},
54	password: {
55	required: "Provide a password",
56	rangelength: jQuery.format("Enter at least {0} characters")
57	},
58	password_confirm: {
59	required: "Repeat your password",
60	minlength: jQuery.format("Enter at least {0} characters"),
61	equalTo: "Enter the same password as above"
62	},
63	email: {
64	required: "Please enter a valid email address",
65	minlength: "Please enter a valid email address",
66	remote: jQuery.format("{0} is already in use")
67	},
68	dateformat: "Choose your preferred dateformat",
69	terms: " "
70	},
71	// the errorPlacement has to take the table layout into account
72	errorPlacement: function(error, element) {
73	if ( element.is(":radio") )
74	error.appendTo( element.parent().next().next() );
75	else if ( element.is(":checkbox") )
76	error.appendTo ( element.next() );
77	else
78	error.appendTo( element.parent().next() );
79	},
80	// specifying a submitHandler prevents the default submit, good for the demo
81	submitHandler: function() {
82	alert("submitted!");
83	},
84	// set this class to error-labels to indicate valid fields
85	success: function(label) {
86	// set   as text for IE
87	label.html(" ").addClass("checked");
88	}
89	});
90
91	// propose username by combining first- and lastname
92	$("#username").focus(function() {
93	var firstname = $("#firstname").val();
94	var lastname = $("#lastname").val();
95	if(firstname && lastname && !this.value) {
96	this.value = firstname + "." + lastname;
97	}
98	});
99
100	});
101	</script>
102
103	</head>
104	<body>
105
106	<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
107	<div id="main">
108
109	<div id="content">
110
111	<div id="header">
112	<div id="headerlogo"><img src="milk.png" alt="Remember The Milk" /></div>
113	</div>
114	<div style="clear: both;"><div></div></div>
115
116
117	<div class="content">
118	<div id="signupbox">
119	<div id="signuptab">
120	<ul>
121	<li id="signupcurrent"><a href=" ">Signup</a></li>
122	</ul>
123	</div>
124	<div id="signupwrap">
125	<form id="signupform" autocomplete="off" method="get" action="">
126	<table>
127	<tr>
128	<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
129	<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
130	<td class="status"></td>
131	</tr>
132	<tr>
133	<td class="label"><label id="llastname" for="lastname">Last Name</label></td>
134	<td class="field"><input id="lastname" name="lastname" type="text" value="" maxlength="100" /></td>
135	<td class="status"></td>
136	</tr>
137	<tr>
138	<td class="label"><label id="lusername" for="username">Username</label></td>
139	<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
140	<td class="status"></td>
141	</tr>
142	<tr>
143	<td class="label"><label id="lpassword" for="password">Password</label></td>
144	<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
145	<td class="status"></td>
146	</tr>
147	<tr>
148	<td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm Password</label></td>
149	<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
150	<td class="status"></td>
151	</tr>
152	<tr>
153	<td class="label"><label id="lemail" for="email">Email Address</label></td>
154	<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
155	<td class="status"></td>
156	</tr>
157	<tr>
158	<td class="label"><label>Which Looks Right</label></td>
159	<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
160	<table>
161	<tbody>
162
163	<tr>
164	<td style="padding-right: 5px;">
165	<input id="dateformat_eu" name="dateformat" type="radio" value="0" />
166	<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
167	</td>
168	<td style="padding-left: 5px;">
169	<input id="dateformat_am" name="dateformat" type="radio" value="1" />
170	<label id="ldateformat_am" for="dateformat_am">02/14/07</label>
171	</td>
172	<td>
173	</td>
174	</tr>
175	</tbody>
176	</table>
177	</td>
178	</tr>
179
180	<tr>
181	<td class="label"> </td>
182	<td class="field" colspan="2">
183	<div id="termswrap">
184	<input id="terms" type="checkbox" name="terms" />
185	<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
186	</div> <!-- /termswrap -->
187	</td>
188	</tr>
189	<tr>
190	<td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
191	<td class="field" colspan="2">
192	<input id="signupsubmit" name="signup" type="submit" value="Signup" />
193	</td>
194	</tr>
195
196	</table>
197	</form>
198	</div>
199	</div>
200	</div>
201
202	</div>
203
204	</div>
205
206	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
207	</script>
208	<script type="text/javascript">
209	_uacct = "UA-2623402-1";
210	urchinTracker();
211	</script>
212
213	<script type="text/javascript">
214	$(document).ready(function() {
215	$("<a href='#'>Show script used on this page</a><br/>").appendTo("body").click(function() {
216	script.toggle();
217	return false;
218	});
219	$("<a href='#'>Show serverside script</a>").appendTo("body").click(function() {
220	serverscript.toggle();
221	return false;
222	});
223	var script = $("<code class='mix'>").html( $("#demo").html() ).wrap("<pre></pre>").parent().hide().appendTo("body");
224	var serverscript;
225	$.get("users.phps", function(response) {
226	serverscript = $("<pre>").hide().html( response ).appendTo("body");
227	})
228
229	});
230	</script>
231
232	<script src="../js/chili-1.7.pack.js" type="text/javascript"></script>
233
234	</body>
235	</html>