Skip to content

Commit 0497713

Browse files
author
David Luecke
committed
Updated HTML documentation to development
1 parent 5b7c959 commit 0497713

File tree

1 file changed

+149
-36
lines changed

1 file changed

+149
-36
lines changed

‎doc/index.html

100755100644
Lines changed: 149 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
99
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
10+
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
1011

1112
<script type="text/javascript" src="../js/jquery.dform.js"></script>
1213
<script type="text/javascript" src="../js/jquery.dform.subscriptions.js"></script>
@@ -27,7 +28,7 @@
2728
var data = $.parseJSON($(dataselector).html());
2829
$(this).buildForm(data);
2930
});
30-
31+
3132
SyntaxHighlighter.all();
3233
$(".tabs").tabs(); // Make jQuery UI tabs on this page
3334
eval($("#firstsample").html());
@@ -97,8 +98,8 @@ <h2>What it is for</h2>
9798
<a name="examples"></a>
9899
<h2>Examples</h2>
99100
<h3>Login form</h3>
100-
<p>A simple login form. The hint in the username textfield will dissapear when
101-
you focus it.</p>
101+
<p>A simple login form. The hint in the username field will dissapear when
102+
you focus it or submit the form.</p>
102103

103104
<div class="exampleform tabs">
104105
<ul>
@@ -142,11 +143,14 @@ <h3>Login form</h3>
142143
</div>
143144

144145
<h3>Registration form</h3>
145-
<p>A more complex form</p>
146+
<p>A more complex form with form field validation using the well established
147+
jQuery validation plugin (submit to see validation messages)</p>
146148

147149
<style type="text/css">
148-
#registrationform fieldset { width: 45%; float: left; height: 400px; margin-right: 5px; }
150+
#registrationform fieldset { width: 45%; float: left; height: 420px; margin-right: 5px; }
149151
#registrationform input[type=submit] { margin: 10px 0; }
152+
#registrationform label.error { font-size: 80%; color: #e14f1c; margin-left: 10px; }
153+
#registrationform input.error { border: 1px solid #e14f1c; }
150154
</style>
151155
<div class="exampleform tabs">
152156
<ul>
@@ -171,18 +175,41 @@ <h3>Registration form</h3>
171175
"name" : "email",
172176
"label" : "Email address",
173177
"type" : "text",
174-
"hint" : "E.g. user@example.com"
178+
"hint" : "E.g. user@example.com",
179+
"validate" :
180+
{
181+
"email" : true
182+
}
175183
},
176184
{
177185
"name" : "password",
178186
"label" : "Password",
179-
"type" : "password"
187+
"type" : "password",
188+
"id" : "registration-password",
189+
"validate" :
190+
{
191+
"required" : true,
192+
"minlength" : 5,
193+
"messages" :
194+
{
195+
"required" : "Please enter a password",
196+
"minlength" : "At least {0} characters long"
197+
}
198+
}
180199
},
181200
{
182201
"name" : "password-repeat",
183202
"label" : "Repeat password",
184-
"type" : "password"
185-
},
203+
"type" : "password",
204+
"validate" :
205+
{
206+
"equalTo" : "#registration-password",
207+
"messages" :
208+
{
209+
"equalTo" : "Please repeat your password"
210+
}
211+
}
212+
}
186213
]
187214
},
188215
{
@@ -198,29 +225,37 @@ <h3>Registration form</h3>
198225
{
199226
"name" : "address",
200227
"label" : "Address",
201-
"type" : "text"
228+
"type" : "text",
229+
"validate" : { "required" : true }
202230
},
203231
{
204232
"name" : "zip",
205233
"label" : "ZIP code",
206234
"type" : "text",
207-
"size" : 5
235+
"size" : 5,
236+
"validate" : { "required" : true }
208237
},
209238
{
210239
"name" : "city",
211240
"label" : "City",
212-
"type" : "text"
241+
"type" : "text",
242+
"validate" : { "required" : true }
213243
},
214244
{
215245
"type" : "select",
216-
"name" : "country",
217-
"label" : "Choose country",
246+
"name" : "continent",
247+
"label" : "Choose a continent",
218248
"options" :
219249
{
220-
"can" : "Canada",
221-
"ger" : "Germany",
222-
"us" : "USA",
223-
"fr" : "France"
250+
"america" : "America",
251+
"europe" :
252+
{
253+
"selected" : "true",
254+
"id" : "europe-option",
255+
"value" : "Europe"
256+
},
257+
"asia" : "Asia",
258+
"australia" : "Australia"
224259
}
225260
}
226261
]
@@ -236,28 +271,117 @@ <h3>Registration form</h3>
236271
</div>
237272

238273
<style type="text/css">
239-
#uiform .ui-tabs { position: absolute; left: 400px; top: 70px; }
240-
#uiform .ui-tabs div.ui-widget-content { width: 300px; height: 70px; }
274+
#uiform label.error { font-size: 80%; color: #e14f1c; margin-left: 10px; }
241275
</style>
276+
<script type="text/javascript"><!--
277+
$(document).ready(function() {
278+
$("#dialogbutton").click(function() {
279+
$("#uiform").dialog("open");
280+
});
281+
});
282+
--></script>
242283
<h3>jQuery UI</h3>
243284
<p>The plugin comes with support for the great jQuery UI framework and its controls.
244-
If the form has the ui-widget class jQuery UI button and input styles
245-
will be applied to any matching type.</p>
285+
If the form has the <strong>.ui-widget</strong> class matching jQuery UI styles will be applied
286+
to all buttons and input elements as well as the validation messages.</p>
287+
<p>Example for standard form enhanced with jQuery UI css, showing in a jQuery UI modal dialog</p>
246288
<div class="exampleform tabs">
247289
<ul>
248290
<li><a href="#uiform-div">Form</a></li>
249291
<li><a href="#uiform-src">JSON</a></li>
250292
</ul>
251293
<div id="uiform-div">
294+
<button id="dialogbutton">Show form</button>
252295
<form id="uiform" class="dform ui-widget"></form>
253296
</div>
254297
<div id="uiform-src">
298+
<pre class="brush: js">
299+
{
300+
"action" : "index.html",
301+
"method" : "get",
302+
"title" : "A dialog form",
303+
"dialog" :
304+
{
305+
"modal" : true,
306+
"autoOpen" : false
307+
},
308+
"elements" : [
309+
{
310+
"name" : "email",
311+
"label" : "Email address",
312+
"type" : "text",
313+
"validate" :
314+
{
315+
"required" : true,
316+
"email" : true
317+
}
318+
},
319+
{
320+
"name" : "password",
321+
"label" : "Password",
322+
"type" : "password",
323+
"id" : "dialog-registration-password",
324+
"validate" :
325+
{
326+
"required" : true,
327+
"minlength" : 5,
328+
"messages" :
329+
{
330+
"required" : "Please enter a password",
331+
"minlength" : "At least {0} characters long"
332+
}
333+
}
334+
},
335+
{
336+
"name" : "password-repeat",
337+
"label" : "Repeat password",
338+
"type" : "password",
339+
"validate" :
340+
{
341+
"equalTo" : "#dialog-registration-password",
342+
"messages" :
343+
{
344+
"equalTo" : "Please repeat your password"
345+
}
346+
}
347+
},
348+
{
349+
"type" : "submit",
350+
"value" : "Signup"
351+
}
352+
]
353+
}
354+
</pre>
355+
</div>
356+
</div>
357+
358+
<p>Examples for supported jQuery UI widgets</p>
359+
<style type="text/css">
360+
#uiwidgets .ui-tabs { position: absolute; left: 400px; top: 70px; }
361+
#uiwidgets .ui-tabs div.ui-widget-content { width: 300px; height: 70px; }
362+
</style>
363+
<div class="exampleform tabs">
364+
<ul>
365+
<li><a href="#uiwidgets-div">Form</a></li>
366+
<li><a href="#uiwidgets-src">JSON</a></li>
367+
</ul>
368+
<div id="uiwidgets-div">
369+
<form id="uiwidgets" class="dform ui-widget"></form>
370+
</div>
371+
<div id="uiwidgets-src">
255372
<pre class="brush: js">
256373
{
257374
"action" : "index.html",
258375
"method" : "get",
259376
"elements" :
260377
[
378+
{
379+
"type" : "slider",
380+
"values" : [ 10, 80 ],
381+
"range" : true,
382+
"label" : "Slider",
383+
"id" : "myslider"
384+
},
261385
{
262386
"name" : "textfield",
263387
"label" : "Autocomplete",
@@ -268,25 +392,14 @@ <h3>jQuery UI</h3>
268392
"source" : [ "Apple", "Acer", "Sony", "Summer" ]
269393
}
270394
},
271-
{
272-
"label" : "A themed submit button",
273-
"type" : "submit",
274-
"value" : "Login"
275-
},
276395
{
277396
"name" : "date",
278397
"label" : "Datepicker",
279398
"type" : "text",
280399
"datepicker" : { "showOn" : "button" }
281400
},
282401
{
283-
"type" : "slider",
284-
"values" : [ 10, 80 ],
285-
"range" : true,
286-
"label" : "Slider"
287-
},
288-
{
289-
"label" : "Some progress",
402+
"label" : "A progressbar",
290403
"type" : "progressbar",
291404
"value" : 40
292405
},
@@ -306,7 +419,7 @@ <h3>jQuery UI</h3>
306419
[
307420
{
308421
"name" : "textfield",
309-
"label" : "Just a textfield in jQuery UI tabs",
422+
"label" : "Just a textfield",
310423
"type" : "text"
311424
}
312425
]
@@ -333,7 +446,7 @@ <h3>jQuery UI</h3>
333446
</pre>
334447
</div>
335448
</div>
336-
449+
337450
<a name="about"></a>
338451
<h2>About</h2>
339452
<p>Download the <a target="_blank" href="http://github.com/daffl/jquery.dform/downloads">jQuery.dForm package</a></p>

0 commit comments

Comments
 (0)