forked from pono4ka/nod
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
557 lines (541 loc) · 26.5 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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
<!DOCTYPE html>
<html>
<head>
<title>Nod!</title>
<meta charset="utf-8">
<link href="lib/bootstrap-combined.min.css" rel="stylesheet">
<link href="lib/prettify.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/prettify.js"></script>
<script src="nod.min.js"></script>
<style>
body {margin-bottom:100px}
.code { display: none }
.nod_msg { background: #fcc; display: inline-block; padding: 2px 5px; margin-left: 5px; border-radius: 5px; }
.container {margin-top:20px}
h2 {margin-top:1.4em}
.nod_msg {
font-weight: bold;
}
.input-append, .input-prepend { font-size: 14px; } /* bug in bootstrap? */
/* prettify */
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .prettyprint .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }
.prettyprint {
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0 0 0 33px; /* IE indents via margin-left */
}
ol.linenums li {
padding-left: 12px;
color: #bebec5;
line-height: 20px;
text-shadow: 0 1px 0 #fff;
}
</style>
<script>
$(document).ready(function(){
var see_code = $('<button/>',
{html:"See code", class:"btn btn-mini see-code" }
).on( 'click', function() {
$(this).next('.code').trigger('tgl');
});
$( 'form' ).on( 'submit', submitForm = function( e ) { e.preventDefault(); } ).after( see_code );
$( '.code' ).on( 'tgl', function() {
el = $(this);
el.is(':visible') ? el.slideUp() : el.slideDown();
});
});
</script>
</head>
<body>
<div class="container"><a href="//github.com/casperin/nod" style="margin-top:10px;" class="btn btn-success pull-right"><i class="icon-heart icon-white"></i> Fork me</a>
<h1>Nod v.1.0.4 <small>A frontend validation jQuery plugin</small></h1>
<hr>
<p>Writing frontend validation for forms is painfully boring. So I made this in the hopes that it will help make it a little less agonizing for you.</p>
<p>It's designed to</p>
<ul>
<li>Keep validation away from the fields to keep the html clean and simple</li>
<li>Work with selectors so you can target more fields with just one "rule"</li>
<li>Be flexible. You can easily define your own functions to validate for (and many other things)</li>
<li>Be extensible. If you look in the <a href="https://github.com/casperin/nod/tree/master/nod">source code</a>, it should be <a href="https://github.com/casperin/nod/blob/master/nod/checker.coffee">fairly easy to add new rules</a> or remove/add functionality</li>
</ul>
<p>While it isn't strictly Bootstrap dependent, it defaults to the structure that bootstrap uses for its forms. However it should be flexible enough to accomodate most any structure.</p>
<p>Comments, bugs, suggestions and ideas are all very much appreciated.</p>
<h2>Quick introduction</h2>
<p>
The plugin is made as a jQuery plugin and is activated like this: <code class="prettyprint lang-js">$("#form").nod( metrics );</code> The <code class="prettyprint lang-js">metrics</code> is a list that you build beforehand. It is basically a list of each selector and how you want it validated.
</p>
<p>Example:</p>
<pre class="prettyprint lang-js linenums">var metrics = [
[ '#foo', 'presence', 'Cannot be empty' ],
[ '#bar', 'min-length:4', 'Must be at least 4 characters long' ]
];
$( "#form" ).nod( metrics );</pre>
<p>Each "sublist" consists of three parts:</p>
<ol>
<li>The selector (the validation will be applied to every field that the selector matches)</li>
<li>A string describing what you wish to validate for (see below for documentation)</li>
<li>The error message you wish to display on error</li>
</ol>
<h2 id="metrics">Metrics [ ]</h2>
<p>Here is a table with what you can currently validate for:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>'presence'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'presence', 'Cannot be empty' ]</code></td>
</tr>
<tr>
<td>'exact:<span class="muted">String</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'exact:bar', 'You have to write "bar"!' ]</code></td>
</tr>
<tr>
<td>'not:<span class="muted">String</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'not:bar', 'Do not write "bar"!' ]</code></td>
</tr>
<tr>
<td>'max-length:<span class="muted">Number</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'max-length:4', 'No longer than 4 characters please' ]</code></td>
</tr>
<tr>
<td>'min-length:<span class="muted">Number</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'min-length:4', 'At least 4 characters please' ]</code></td>
</tr>
<tr>
<td>'exact-length:<span class="muted">Number</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'exact-length:4', 'Must be exactly 4 characters' ]</code></td>
</tr>
<tr>
<td>'between:<span class="muted">Number</span>:<span class="muted">Number</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'between:2:4', 'Must be between 2 and 4 characters long' ]</code></td>
</tr>
<tr>
<td>'max-num:<span class="muted">Number</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'max-num:4', 'Type in a number that is at smaller than 5' ]</code></td>
</tr>
<tr>
<td>'min-num:<span class="muted">Number</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'min-num:4', 'Type in a number that is bigger than 3' ]</code></td>
</tr>
<tr>
<td>'between-num:<span class="muted">Number</span>:<span class="muted">Number</span>'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'between-num:2:4', 'Type in a number between 2 and 4' ]</code></td>
</tr>
<tr>
<td>'integer'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'integer', 'Must be a whole number' ]</code></td>
</tr>
<tr>
<td>'float'</td>
<td><code class="prettyprint lang-js">[ '#foo', 'float', 'Must be a number (decimals are fine)' ]</code></td>
</tr>
<tr>
<td>'same-as:<span class="muted">Selector</span>'</td>
<td><code class="prettyprint lang-js">[ '#email_repeat', 'same-as:#email', 'Your emails do not match' ]</code></td>
</tr>
<tr>
<td>'one-of' <small>(<a href="#example4">example</a>)</small></td>
<td><code class="prettyprint lang-js">[ '#first, #second', 'one-of', 'You must fill out either #first or #second' ]</code></td>
</tr>
<tr>
<td>'email' <small>(<a href="#email">read this</a>)</small></td>
<td><code class="prettyprint lang-js">[ '#foo', 'email', 'Must be a valid email (RFC 822)' ]</code></td>
</tr>
<tr>
<td class="muted">Function</td>
<td><code class="prettyprint lang-js">[ '#foo', ( function(x) { return x % 2 == 0; } ), 'Must be divisible by two' ]</code></td>
</tr>
<tr>
<td class="muted">RegExp</td>
<td><code class="prettyprint lang-js">[ '#foo', /Hello/, 'String must contain the word "Hello"' ]</code></td>
</tr>
</tbody>
</table>
<p>If there is something not on the list that you think others would benefit from, then feel free to <a href="https://github.com/casperin/nod/issues">create a new issue </a>and let me know.</p>
<h2 id="options">Options { }</h2>
<p>You can also pass along an object: <code class="prettyprint lang-js">$("#form").nod( metrics, options );</code></p>
<p>Example:</p>
<pre class="prettyprint lang-js linenums">var options = {
'delay' : 200,
'submitBtnSelector' : '#submit_btn'
};</pre>
<p>Here is a table of everything you can change with the options object. </p>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>delay</td>
<td>Number</td>
<td>700</td>
<td>Delay on <code>keyup</code> before it runs a check. Set it to <code>false</code> to disable completely.</td>
</tr>
<tr>
<td>disableSubmitBtn</td>
<td>Bool</td>
<td>true</td>
<td>Set to false if you don't want the submit button to be disabled.</td>
</tr>
<tr>
<td>helpSpanDisplay</td>
<td>String</td>
<td>'help-inline'</td>
<td>Set this to <code>help-block</code> if you want error messages to be shown on next line.</td>
</tr>
<tr>
<td>groupClass</td>
<td>String</td>
<td>'error'</td>
<td>The <code>.control-group</code> will get this class if an error is found. Can be set to anything you like, but <code>error</code>, <code>info</code>, <code>warning</code>, or <code>success</code> makes the most sense with bootstrap.</td>
</tr>
<tr>
<td>submitBtnSelector</td>
<td>String</td>
<td>'[type=submit]'</td>
<td>Selector to find the submit button. If the form is submitted with a button that is not a member of this selector, then the form will be submitted regardless of errors.</td>
</tr>
<tr>
<td>errorPosClasses</td>
<td>Array</td>
<td>['.help-inline', '.add-on', button, '.input-append']</td>
<td>When placing the error message, nod will look for these elements (after and above) and place it after these if they exist.</td>
</tr>
<tr>
<td>errorClass</td>
<td>String</td>
<td>'nod_msg'</td>
<td>Used internally. This is the class you want to style if you want any specific styling.</td>
</tr>
<tr>
<td>silentSubmit</td>
<td>Bool</td>
<td>false</td>
<td>If set to <code>true</code>, the form will not be submitted the regular way, but instead an event: <code>silentSubmit</code> will be called on the form with the values you'd normally submit. (<a href="#silentsubmit">Read more</a>)</td>
</tr>
<tr>
<td>broadcastError</td>
<td>Bool</td>
<td>false</td>
<td>If set to <code>true</code>, nod will trigger an event on the window object. (<a href="#broadcast">Read more</a>)</td>
</tr>
<tr>
<td>groupSelector</td>
<td>String</td>
<td>'.control-group'</td>
<td>The selector for something surrounding your input elements. Like <code>.control-group</code> in bootstrap forms.</td>
</tr>
</tbody>
</table>
<h2 id="notes">Notes</h2>
<h3 id="radio">Radio buttons</h3>
<p>These can be a bit tricky to validate, so here's an example.</p>
<pre class="prettyprint lang-html linenums"><div class="control-group">
<div class="controls">
<label class="radio">
<input type="radio" name="a" value="a1" id="bar"> First
</label>
<label class="radio">
<input type="radio" name="a" value="a2"> Second
</label>
<label class="radio">
<input type="radio" name="a" value="a3"> Third
</label>
</div>
</div>
<!-- ... -->
<button data-loading-text="loading..." type="submit" class="btn btn-success">Submit form</button></pre>
<p>Pretty standard html. Notice the <code>#bar</code> on line 4 though. To validate for presence on these fields, we don't need the <code>#bar</code>, we just do</p>
<pre class="prettyprint lang-js linenums">var metrics = [
['[name=a]', 'presence', 'You must click on at least one radio button']
];
$( "#form" ).nod( metrics );</pre>
<p>However if we want people to specifically click on a particular radio button, we do (line 2 is still important)</p>
<pre class="prettyprint lang-js linenums">var metrics = [
['[name=a]', 'presence', 'You must click on at least one radio button'],
['#bar', 'exact:a1', 'You must click on *this* radio button']
];
$( "#form" ).nod( metrics );</pre>
<p>Conversely we can use the keyword <code>not</code> instead of <code>exact</code>.</p>
<p><span class="label label-info">Notice</span> <code>name</code> attribute is mandatory on the input fields for all of these.</p>
<h3 id="ajax">Ajax checking</h3>
<p>Yes, it works. Here's some code:</p>
<pre class="prettyprint lang-js linenums">var getFn = function( value ) {
$.get('check_email.php', value);
};
var metrics = [
['#email', getFn, 'This email is already in use']
];
$( "#form" ).nod( metrics );</pre>
<p>Nod.js will take whatever response it gets from the server and eval it (if possible) to a boolean and use that as an indicator for whether the input is valid. This means that a "truthy" responses like <code>"true"</code>, <code>1</code>, <code>true</code>, <code>"foo"</code> will all return true (the field is valid) and conversely <code>"false"</code>, <code>0</code>, <code>false</code> will return false and be interpreted as if the field is not valid.</p>
<p>Also, if your submit button has <code>data-loading-text</code>, this will be swapped while the check is going on if it was initiated by a click of that button (and swapped back when done, regardless of errors).</p>
<p> <span class="label label-info">Notice</span> This feature is all very beta'ish and kind of hard to test fully. So if you find any errors or things that could be handled more gracefully, then I'd appreciate the feedback.</p>
<h3 id="email">Email validation</h3>
<p>Don't use this. Validating emails should be done backend (by sending an email) and not frontend. I've used the most lax regex for checking emails that I could find (RFC822) so as to err on the side of letting too many emails through rather than rejecting valid emails; but really, you ought not to use frontend email validation at all.</p>
<p>That said, the ones who write the code are not always the ones who get to decide which features to implement, so I've included the feature regardless of what I think about its use. Hope it makes your life a little better.</p>
<h3 id="silentsubmit">Silent Submit</h3>
<p>if you have set <code>silentSubmit : true</code>, then the form won't submit. Instead you need to listen for the event on the form itself:</p>
<pre class="prettyprint lang-js linenums">var submitFn = function( event, data ) {
console.log( data );
}
$( '#form' ).on( 'silentSubmit', submitFn );</pre>
<p>This is used mainly (only?) if you want to submit your form by ajax.</p>
<h3 id="broadcast">Broadcasting</h3>
<p>Say you want to log to your server everytime users make errors in your fields, then set <code>broadcastError : true</code> in your options object and listen for <code>nod_error_fired</code> on the window oject, like this:</p>
<pre class="prettyprint lang-js linenums">var log_error = function( event, data ) {
console.log( data.el );
console.log( data.msg );
}
$( window ).on( 'nod_error_fired', log_error );</pre>
<p>As you can see, you'll get an object with the element (actually the <code>$(el)</code>) and one with the error message.</p>
<h2 id="download">Downloading</h2>
<p>Go to <a href="//github.com/casperin/nod">github.com/casperin/nod</a> and fork it. For just a quick plug and play you only need the <a href="https://github.com/casperin/nod/blob/master/nod.js">nod.js</a> or <a href="https://github.com/casperin/nod/blob/master/nod.min.js">nod.min.js</a>.</p>
<p id="bower"><strong>Bower: </strong><code>jquery-nod</code></p>
<h2 id="contribute">Contributing</h2>
<p>This project is still young and there is plenty of room for improvements, so fork the development branch (we use git flow) and hack away. Nod.js is written in <a href="http://coffeescript.org/">CoffeeScript</a>. Check out <a href="https://github.com/casperin/nod/tree/develop/nod">the source here</a>. I tried my best to comment the code to make it easy to dive in, but in case you have questions I'd be happy to elaborate. Right now we're (slowly) moving to using Yeoman and Gruntjs, so you will probably want to use that too. It's a bit messy though; but you can test some stuff with <code>grunt test</code>, and concat and minify a version with <code>grunt build</code>. A server is run via <code>grunt server</code>, but (currently) doesn't update on changes to the test files.</p>
<p>If you don't have anything particular you want to contribute with, but just love nod.js so much that you still want to do something (I love you too man), then...</p>
<ol>
<li>Tests! There is currently not a single test unless you think of CoffeeLint as testing (this is one of the reasons why we're moving to yeoman)</li>
<li>Write examples (see below) and <a href="https://github.com/casperin/nod/tree/develop/dev/examples">look here</a> for current ones (written in jade).</li>
<li>Clean up gruntfile</li>
<li><a href="https://github.com/casperin/nod/issues">Issues...</a></li>
</ol>
<h2 id="examples">Examples</h2>
<hr id="example1">
<form id="ex1" class="form-horizontal">
<div class="control-group">
<label class="control-label">Mandatory field</label>
<div class="controls">
<input type="text">
</div>
</div>
<div class="controls">
<button type="submit" class="btn">Submit</button>
</div>
<script>
var metrics = [
[ 'input', 'presence', 'Cannot be empty' ]
];
$("#ex1").nod( metrics );
</script>
</form>
<div class="code">
<pre class="prettyprint lang-html"><form id="ex1" class="form-horizontal">
<div class="control-group">
<label class="control-label">Mandatory field</label>
<div class="controls">
<input type="text">
</div>
</div>
<div class="controls">
<button type="submit" class="btn">Submit</button>
</div>
</form></pre>
<pre class="prettyprint lang-js">var metrics = [
[ 'input', 'presence', 'Cannot be empty' ]
];
$("#ex1").nod( metrics );</pre>
</div>
<hr id="example2">
<form id="ex2" class="form-horizontal">
<div class="control-group">
<label class="control-label">Search for number</label>
<div class="controls">
<input type="text" placeholder="type a number and hit enter" class="search_field">
</div>
</div>
<script>
var metrics = [
[ '.search_field', 'integer', 'Must be a number' ]
];
var options = {
disableSubmitBtn : false
}
$("#ex2").nod( metrics, options );
</script>
</form>
<div class="code">
<pre class="prettyprint lang-html"><form id="ex2" class="form-horizontal">
<div class="control-group">
<label class="control-label">Search for number</label>
<div class="controls">
<input type="text" class="search_field" placeholder="type a number and hit enter">
</div>
</div>
</form></pre>
<pre class="prettyprint lang-js">var metrics = [
[ '.search_field', 'integer', 'Must be a number' ]
];
var options = {
disableSubmitBtn : false
}
$("#ex2").nod( metrics, options );</pre>
</div>
<hr id="example3">
<form id="ex3" class="form-horizontal">
<div class="control-group">
<label class="control-label">Type "foo"</label>
<div class="controls">
<input type="text" class="ex3a">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label>Select something</label>
</div>
<div class="controls">
<select id="ex3select">
<option value="">Select something please</option>
<option value="1">Pick this</option>
<option value="2">Or this</option>
<option value="3">But not this</option>
<option value="4">This is fine though</option>
</select>
</div>
</div>
<div class="controls">
<button type="submit" class="btn">Submit</button>
</div>
<script>
var metrics = [
[ '.ex3a', 'exact:foo', 'I told you to type "foo"!' ],
[ '#ex3select', 'presence', 'Pick something' ],
[ '#ex3select', 'not:3', 'I told you not to pick this one!' ],
];
var options = {
'groupClass' : 'warning',
};
$("#ex3").nod( metrics, options );
</script>
</form>
<div class="code">
<pre class="prettyprint lang-html"><form id="ex3" class="form-horizontal">
<div class="control-group">
<label class="control-label">Type "foo"</label>
<div class="controls">
<input type="text" class="ex3a">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label>Select something</label>
</div>
<div class="controls">
<select id="ex3select">
<option value="">Select something please</option>
<option value="1">Pick this</option>
<option value="2">Or this</option>
<option value="3">But not this</option>
<option value="4">This is fine though</option>
</select>
</div>
</div>
<div class="controls">
<button type="submit" class="btn">Submit</button>
</div></pre>
<pre class="prettyprint lang-js">var metrics = [
[ '.ex3a', 'exact:foo', 'I told you to type "foo"!' ],
[ '#ex3select', 'presence', 'Pick something' ],
[ '#ex3select', 'not:3', 'I told you not to pick this one!' ],
];
var options = {
'groupClass' : 'warning',
};
$("#ex3").nod( metrics, options );</pre>
</div>
<hr id="example4">
<form id="ex4" class="form-horizontal">
<p>Leave at least one number</p>
<div class="control-group">
<label class="control-label">Home</label>
<div class="controls">
<input type="text" id="ex4a_home">
</div>
</div>
<div class="control-group">
<label class="control-label">Work</label>
<div class="controls">
<input type="text" id="ex4a_work">
</div>
</div>
<div class="control-group">
<label class="control-label">Mobile</label>
<div class="controls">
<input type="text" id="ex4a_mobile">
</div>
</div>
<div class="controls">
<button type="submit" class="btn">Call me</button>
</div>
<script>
var metrics = [
[ '#ex4a_home, #ex4a_work, #ex4a_mobile', 'one-of', 'Add at least one number' ]
];
$("#ex4").nod( metrics );
</script>
</form>
<!-- use http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx-->
<div class="code">
<pre class="prettyprint lang-html"><form id="ex4" class="form-horizontal">
<p>Leave at least one number</p>
<div class="control-group">
<label class="control-label">Home</label>
<div class="controls">
<input type="text" id="ex4a_home">
</div>
</div>
<div class="control-group">
<label class="control-label">Work</label>
<div class="controls">
<input type="text" id="ex4a_work">
</div>
</div>
<div class="control-group">
<label class="control-label">Mobile</label>
<div class="controls">
<input type="text" id="ex4a_mobile">
</div>
</div>
<div class="controls">
<button type="submit" class="btn">Call me</button>
</div>
</form></pre>
<pre class="prettyprint lang-js"><script>
var metrics = [
[ '#ex4a_home, #ex4a_work, #ex4a_mobile', 'one-of', 'Add at least one number' ]
];
$( '#ex4' ).nod( metrics );
</script></pre>
</div>
</div>
<script>!function($) { $(function(){ window.prettyPrint && prettyPrint() }) }(window.jQuery);</script>
</body>
</html>