Skip to content

Commit 7a307dc

Browse files
victorjonssonvictorjonsson
committed
Added documenation
1 parent b064add commit 7a307dc

File tree

2 files changed

+66
-94
lines changed

2 files changed

+66
-94
lines changed

‎README.md

Lines changed: 65 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,7 @@ particular form.
99
*Usage example*
1010

1111
```html
12-
<html>
13-
<head>
14-
<script src="js/jquery.min.js"></script>
15-
<script src="js/form-validator/jquery.form-validator.min.js"></script>
16-
<script>
17-
$.formUtils.loadModules('date,security');
18-
</script>
19-
</head>
20-
<form action="" onsubmit="return $(this).validate();">
12+
<form action="" method="POST">
2113
<p>
2214
Name (4 characters minimum):
2315
<input name="user" data-validation="length" data-validation-length="min4" />
@@ -34,7 +26,13 @@ particular form.
3426
<input type="submit" />
3527
</p>
3628
</form>
37-
...
29+
<script src="js/jquery.min.js"></script>
30+
<script src="js/form-validator/jquery.form-validator.min.js"></script>
31+
<script>
32+
$.setupForm({
33+
modules : 'date, security'
34+
});
35+
</script>
3836
```
3937

4038
### Moving up to version 2.0
@@ -43,9 +41,11 @@ So what has changed since version 1.x?
4341

4442
* A whole bunch of validation functions have been added (see below)
4543
* A modular design have been introduced, which means that some validation functions is default and others is
46-
part of a module.
44+
part of a module. This in turn reduces server and bandwidth costs.
4745
* You no longer need to prefix the validation rules with "validate_"
4846
* Error message position now defaults to "element"
47+
* The optional features (validatOnBlur and showHelpOnFocus) is now enabled by default
48+
* The function $.setForm is introduced that makes it possible to initiate the form validation with less code
4949

5050

5151
### Default validators and features (no module needed)
@@ -102,11 +102,17 @@ You can use the function `$.formUtils.addValidator()` to add your own validation
102102
that checks if the input contains an even number.
103103

104104
```html
105-
<html>
106-
<head>
107-
<script src="js/jquery.min.js"></script>
108-
<script src="js/formvalidator/jquery.formvalidator.min.js"></script>
109-
<script>
105+
<form action="" method="post" onsubmit="return $(this).validate();">
106+
<p>
107+
<input type="text" data-validation="even" />
108+
</p>
109+
...
110+
</form>
111+
<script src="js/jquery.min.js"></script>
112+
<script src="js/form-validator/jquery.form-validator.min.js"></script>
113+
<script>
114+
115+
// Add validator
110116
$.formUtils.addValidator({
111117
name : 'even',
112118
validate : function(value, $el, config, language, $form) {
@@ -115,14 +121,11 @@ that checks if the input contains an even number.
115121
errorMessage : 'You have to answer an even number',
116122
errorMessageKey: 'badEvenNumber'
117123
});
118-
</script>
119-
</head>
120-
<body>
121-
...
122-
<form action="" method="post" onsubmit="return $(this).validate();">
123-
<p>
124-
<input type="text" data-validation="even" />
125-
...
124+
125+
// Initiate form validation
126+
$.setupForm();
127+
128+
</script>
126129
```
127130

128131
### Required properties passed into $.formUtils.addValidator
@@ -157,7 +160,7 @@ URL, so that the browser never caches the file. You should of course never use *
157160
```html
158161
<html>
159162
<head>
160-
<script src="js/formvalidator/jquery.formvalidator.min.js"></script>
163+
<script src="js/form-validator/jquery.form-validator.min.js"></script>
161164
<script>
162165
$.formUtils.loadModules('mymodule.dev', 'js/validation-modules/');
163166
</script>
@@ -172,23 +175,7 @@ caches the javascript).
172175

173176
The second argument is the path where the module files is located. This argument is optional, if not given
174177
the module files has to be located in the same directory as the core modules shipped together with this jquery plugin
175-
(js/formvalidator/)
176-
177-
## Validate inputs on blur
178-
It is possible to show that the value of an input is incorrect immediately when the input gets blurred.
179-
180-
```html
181-
<form action="" onsubmit="return $(this).validate();" id="my_form">
182-
<p>
183-
<strong>Website:</strong>
184-
<input type="text" name="website" data-validation="url" />
185-
</p>
186-
...
187-
</form>
188-
<script>
189-
$('#my_form').validateOnBlur();
190-
</script>
191-
```
178+
(js/form-validator/)
192179

193180
## Show help information
194181
It is possible to display help information for each input. The information will fade in when input is focused and fade out when input looses focus.
@@ -200,10 +187,6 @@ It is possible to display help information for each input. The information will
200187
<textarea name="why" data-validation-help="Please give us some more information" data-validation="required"></textarea>
201188
</p>
202189
...
203-
</form>
204-
<script>
205-
$('#my_form').showHelpOnFocus();
206-
</script>
207190
```
208191

209192
## Fully customizable
@@ -292,61 +275,37 @@ var enErrorDialogs = {
292275
```
293276

294277
```html
295-
<html>
296-
<head>
297-
<script src="scripts/jquery.formvalidator.min.js"></script>
298-
<script src="scripts/locale.en.js"></script>
299-
...
300-
<head>
301-
<body>
302-
...
303-
<form action="script.php" onsubmit="return $(this).validate(enErrorDialogs);">
278+
<form action="script.php" onsubmit="return $(this).validate(enErrorDialogs);">
304279
...
305-
```
306-
307-
Inline error messages is also possible. If you add attribute data-validation-error-msg to an element the value of that attribute will be displayed instead of the error dialog that the validation function refers to.
308-
309-
## Simple captcha example
310-
```php
311-
<?php
312-
session_start();
313-
if( isset($_POST['captcha']) && isset($_SESSION['captcha'])) {
314-
if($_POST['captcha'] != ($_SESSION['captcha'][0]+$_SESSION['captcha'][1]))
315-
die('Invalid captcha answer'); // client does not have javascript enabled
316-
}
317-
318-
$_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
319-
320-
?>
321-
<html>
322-
....
323-
<form action="" onsubmit="return $(this).validate();">
324-
<p>
325-
What is the sum of <?=$_SESSION['captcha'][0]?> + <?=$_SESSION['captcha'][1]?>? (security question)
326-
<input name="captcha" data-validation="spamcheck captcha<?=( $_SESSION['capthca'][0] + $_SESSION['captcha'][1] )?>"
327-
</p>
328-
<p><input type="submit" /></p>
329280
</form>
281+
<script src="js/jquery.min.js"></script>
282+
<script src="js/form-validator/jquery.form-validator.min.js"></script>
283+
<script src="js/form-validator/locale.en.js"></script>
284+
<script>
285+
$.setupForm({
286+
language : enErrorDialogs
287+
});
288+
</script>
330289
...
331-
</html>
290+
332291
```
333292

293+
Inline error messages is also possible. If you add attribute data-validation-error-msg to an element the value of that attribute will be displayed instead of the error dialog that the validation function refers to.
294+
334295
## Input length restriction
335296
```html
336297
<p>
337298
History (<span id="maxlength">50</span> characters left)
338299
<textarea rows="3" id="area"></textarea>
339300
</p>
340301
<script type="text/javascript">
341-
$('#area').restrictLength($('#maxlength'));
302+
$('#area').restrictLength( $('#maxlength') );
342303
</script>
343304
```
344305

345306
## Password confirmation example
346-
```html
347-
<p>Password: <input type="password" name="pass" data-validation="confirmation" /></p>
348-
<p>Confirm password: <input type="password" name="pass_confirmation" /></p>
349-
```
307+
308+
[Click here for more info](http://formvalidator.net/#security-validators_confirmation)
350309

351310
## Changelog
352311

@@ -358,15 +317,28 @@ $_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
358317
* length now looks at attribute data-validation-length to find out how long or short the value must be
359318
* The validation rule no longer needs to be prefixed with ""
360319
* Some validation functions is moved to modules (see function reference in top of this document)
320+
* Added function $.formSetup() to reduce the amount of code that has to be written when initiating the form validation.
321+
322+
323+
## Credits
361324

362-
## Maintainer
325+
#### Maintainer
363326

364327
[Victor Jonsson](https://github.com/victorjonsson)
365328

366-
## Contributors
367-
[Joel Sutherland](https://github.com/robamaton) (contributor)<br />
368-
[Steve Wasiura](https://github.com/stevewasiura) (contributor)<br />
369-
[Matt Clements](https://github.com/mattclements) (contributor)<br />
370-
[dfcplc](https://github.com/dfcplc) (contributor)<br />
371-
[Darren Mason](http://www.mypocket-technologies.com) (Password strength meter)<br />
372-
[Scott Gonzales](http://projects.scottsplayground.com/iri/) (URL regexp)
329+
#### Contributors
330+
<a href="https://github.com/robamaton" target="_blank">Joel Sutherland</a><br />
331+
<a href="https://github.com/stevewasiura" target="_blank">Steve Wasiura</a><br />
332+
<a href="https://github.com/mattclements" target="_blank">Matt Clements</a><br />
333+
<a href="https://github.com/dfcplc" target="_blank">@dfcplc</a><br />
334+
<a href="https://github.com/coffein" target="_blank">Andree Wendel</a><br />
335+
<a href="http://www.huotmedia.com" target="_blank">Nicholas Huot</a><br />
336+
<a href="https://github.com/Repkit" target="_blank">@repkit</a><br />
337+
<a href="https://github.com/aL3xa" target="_blank">Alexandar Blagotic</a><br />
338+
<a href="http://thekindof.me/" target="_blank">Yasith Fernando</a><br />
339+
<a href="https://github.com/S0L4R1S" target="_blank">@S0L4R1S</a><br />
340+
341+
#### Additional credits
342+
343+
<a href="http://projects.scottsplayground.com/iri/" target="_blank">Scott Gonzales</a> (URL regexp)<br />
344+
<a href="http://www.mypocket-technologies.com" target="_blank">Darren Mason</a> (Password strength meter)

‎formvalidator.jquery.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"download" : "https://raw.github.com/victorjonsson/jQuery-Form-Validator/master/jquery.formvalidator.min.js",
1919
"bugs" : "https://github.com/victorjonsson/jQuery-Form-Validator/issues",
2020
"licenses" : [{
21-
"type": "GPLv2",
21+
"type": "Dual licensed under the MIT or GPL Version 2 licenses",
2222
"url": "http://www.gnu.org/licenses/gpl-2.0.html"
2323
}],
2424
"dependencies" : {

0 commit comments

Comments
 (0)