forked from mustardamus/ketchup-plugin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
264 lines (230 loc) · 12.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Ketchup Plugin</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<ul id="toc">
<li><a href="#what">What is the Ketchup Plugin about?</a></li>
<li><a href="#basic">Ketchup right out of the box. Basic validations.</a></li>
<li><a href="yourway.html">Have it your way. Error-Container styling and behaviour.</a></li>
<li><a href="validation.html">You need to validate in a different way? Make your own Ketchup!</a></li>
<li><a href="support.html">Download, Support and Bug reports.</a></li>
</ul>
<div id="wrapper">
<h1 id="what">What is the Ketchup Plugin about?</h1>
<p>
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance
and functionality.
</p>
<p>
Don't like the default styling? Change it! Need another mark up? Edit it! No validation fits your needs?
Write your own! Make your own ketchup with ease.
</p>
<h1 id="basic">Ketchup right out of the box. Basic validations.</h1>
<p>
Although Ketchup is designed to be styled and extended by you it already looks tasty and gives you the most common
validations by default. Lets check that out.
</p>
<h2>Setup</h2>
<p>
First we need to set everything up to use Ketchup. Nothing easier than that. Include jQuery and the Ketchup stylesheet and scripts in your header:
</p>
<pre><code><link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.messages.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.validations.basic.js"></script></code></pre>
<p>
If you do plan to only use basic validations and the default messages you also can include the one package file instead of the
three Ketchup script files:
</p>
<pre><code><link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ketchup.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ketchup.basic.min.js"></script></code></pre>
<h2>Example Markup</h2>
<p>
Next we obviously need a form to validate. This is our first basic example form:
</p>
<pre><code><form action="index.html" id="example1">
<div>
<label for="ex1_username">Username</label>
<input type="text" id="ex1_username" />
</div>
<div>
<label for="ex1_password">Password</label>
<input type="password" id="ex1_password" />
</div>
<div>
<label for="ex1_password_conf">Password Confirmation</label>
<input type="password" id="ex1_password_conf" />
</div>
<div>
<label for="ex1_roles">Speciality</label>
<p><input type="checkbox" name="role" value="jquery" /> jQuery</p>
<p><input type="checkbox" name="role" value="js" /> JavaScript</p>
<p><input type="checkbox" name="role" value="rails" /> Rails</p>
<p><input type="checkbox" name="role" value="php" /> PHP</p>
<p><input type="checkbox" name="role" value="wp" /> Wordpress</p>
<p><input type="checkbox" name="role" value="other" /> Other</p>
<div class="clear"></div>
</div>
<div>
<label for="ex1_about">About you</label>
<textarea id="ex1_about" rows="1"></textarea>
</div>
<div class="submit">
<input type="submit" value="(Try to) Submit" />
</div>
</form></code></pre>
<h2>Add your validation right in the Markup</h2>
<p>
By default Ketchup is looking in the <code>class</code> attribute of <code>input</code>, <code>textarea</code> and <code>select</code>
for <code>validate()</code> functions. Lets set them now:
</p>
<pre><code><form action="index.html" id="example1">
<div>
<label for="ex1_username">Username</label>
<input type="text" id="ex1_username" <span>class="validate(required, username)"</span> />
</div>
<div>
<label for="ex1_password">Password</label>
<input type="password" id="ex1_password" <span>class="validate(required)"</span> />
</div>
<div>
<label for="ex1_password_conf">Password Confirmation</label>
<input type="password" id="ex1_password_conf" <span>class="validate(required, match(#ex1_password))"</span> />
</div>
<div>
<label for="ex1_roles">Speciality</label>
<p><input type="checkbox" name="role" value="jquery" /> jQuery</p>
<p><input type="checkbox" name="role" value="js" /> JavaScript</p>
<p><input type="checkbox" name="role" value="rails" /> Rails</p>
<p><input type="checkbox" name="role" value="php" /> PHP</p>
<p><input type="checkbox" name="role" value="wp" /> Wordpress</p>
<p><input type="checkbox" name="role" value="other" <span>class="validate(rangeselect(1,3))"</span> /> Other</p>
<div class="clear"></div>
</div>
<div>
<label for="ex1_about">About you</label>
<textarea id="ex1_about" rows="1" <span>class="validate(rangelength(10,140))"</span>></textarea>
</div>
<div>
<label for "ex1_age">Your age</label>
<select name="ex1_age" <span>class="validate(notvalue(Select age))"</span>>
<option>Select age</option>
<option>0-20</option>
<option>21-40</option>
<option>41-60</option>
<option>61-80</option>
<option>81-..</option>
</select>
</div>
<div class="submit">
<input type="submit" value="(Try to) Submit" />
</div>
</form></code></pre>
<h2>Activate Ketchup</h2>
<p>One last simple step. We need to activate the Ketchup Plugin with the default settings on the form:</p>
<pre><code>$(document).ready(function() {
$('#example1').ketchup();
});</code></pre>
<h2>Outcome (Try to submit the form)</h2>
<form action="index.html" id="example1">
<div>
<label for="ex1_username">Username</label>
<input type="text" id="ex1_username" class="validate(required, username)" />
</div>
<div>
<label for="ex1_password">Password</label>
<input type="password" id="ex1_password" class="validate(required)" />
</div>
<div>
<label for="ex1_password_conf">Password Confirmation</label>
<input type="password" id="ex1_password_conf" class="validate(required, match(#ex1_password))" />
</div>
<div>
<label for="ex1_roles">Speciality</label>
<p><input type="checkbox" name="role" value="jquery" /> jQuery</p>
<p><input type="checkbox" name="role" value="js" /> JavaScript</p>
<p><input type="checkbox" name="role" value="rails" /> Rails</p>
<p><input type="checkbox" name="role" value="php" /> PHP</p>
<p><input type="checkbox" name="role" value="wp" /> Wordpress</p>
<p><input type="checkbox" name="role" value="other" class="validate(rangeselect(1,3))" /> Other</p>
<div class="clear"></div>
</div>
<div>
<label for="ex1_about">About you</label>
<textarea id="ex1_about" rows="1" class="validate(rangelength(10,140))"></textarea>
</div>
<div>
<label for "ex1_age">Your age</label>
<select name="ex1_age" class="validate(notvalue(Select age))">
<option>Select age</option>
<option>0-20</option>
<option>21-40</option>
<option>41-60</option>
<option>61-80</option>
<option>81-..</option>
</select>
</div>
<div class="submit">
<input type="submit" value="(Try to) Submit" />
</div>
</form>
<h2>Basic Validations</h2>
<p>
Ketchup comes with these pre-written basic validations (See them in the file <code>jquery.ketchup.validations.basic.js</code>
and the corresponding messages in <code>jquery.ketchup.messages.js</code>):
</p>
<h3>required <span>validate(required)</span></h3>
<p>Makes the field required.</p>
<h3>minlength(min) <span>validate(minlength(5))</span></h3>
<p>The value must have a minimal length of <code>min</code>.</p>
<h3>maxlength(max) <span>validate(maxlength(10))</span></h3>
<p>The value must have a maximal length of <code>max</code>.</p>
<h3>rangelength(min, max) <span>validate(rangelength(5,10))</span></h3>
<p>The value must have a length between <code>min</code> and <code>max</code>.</p>
<h3>min(min) <span>validate(min(5))</span></h3>
<p>The number must be at least <code>min</code>.</p>
<h3>max(max) <span>validate(max(10))</span></h3>
<p>The number must be not greater than <code>max</code>.</p>
<h3>range(min, max) <span>validate(range(5,10))</span></h3>
<p>The number must be between <code>min</code> and <code>max</code>.</p>
<h3>number <span>validate(number)</span></h3>
<p>The value must be a number.</p>
<h3>digits <span>validate(digits)</span></h3>
<p>The value must be digits.</p>
<h3>email <span>validate(email)</span></h3>
<p>The value must be a valid e-mail address.</p>
<h3>url <span>validate(url)</span></h3>
<p>The value must be a valid URL.</p>
<h3>username <span>validate(username)</span></h3>
<p>The value must be a valid username (a-z0-9_-).</p>
<h3>match(selector) <span>validate(match(#password))</span></h3>
<p>The value must match the value of the field that can be found via the <code>selector</code>.</p>
<h3>date <span>validate(date)</span></h3>
<p>The value must be a valid date.</p>
<h3>minselect(min) <span>validate(minselect(2))</span></h3>
<p>There must be at least <code>min</code> checkboxes selected with the same <code>name</code>. Apply this validation only to one checkbox in the group.</p>
<h3>maxselect(max) <span>validate(maxselect(6))</span></h3>
<p>No more than <code>max</code> selected checkboxes allowed with the same <code>name</code>. Apply this validation only to one checkbox in the group.</p>
<h3>rangeslect(min, max) <span>validate(rangeselect(2,6))</span></h3>
<p>Allow between <code>min</code> and <code>max</code> selected checkboxes. Apply this validation only to one checkbox in the group.</p>
<h3>notvalue(val) <span>notvalue(some text)</span></h3>
<p>Value in field must be different than <code>val</code>. You can apply this on select field.</p>
<h2>Combining Validations</h2>
<p>You can combine validations by comma like this:</p>
<pre><code><input type="text" class="<span>validate(required, username, rangelength(3,20))</span>" /></code></pre>
</div>
</body>
</html>