Skip to content

Commit 59147b3

Browse files
committed
added documentation
1 parent 8a84709 commit 59147b3

File tree

1 file changed

+48
-53
lines changed

1 file changed

+48
-53
lines changed

README.md

Lines changed: 48 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ it's designed to require as little bandwidth as possible. This is achieved by gr
44
in "modules", making it possible for the programmer to load **only those functions that's needed** to validate a
55
particular form.
66

7+
*Form demonstrations and full documentations is available at http://formvalidator.net/*
8+
79
*Usage example*
810

911
```html
@@ -18,7 +20,7 @@ particular form.
1820
<form action="" onsubmit="return $(this).validate();">
1921
<p>
2022
Name (4 characters minimum):
21-
<input name="user" data-validation="min_length length4" />
23+
<input name="user" data-validation="length" data-validation-length="min4" />
2224
</p>
2325
<p>
2426
Birthdate (yyyy-mm-dd):
@@ -40,64 +42,57 @@ particular form.
4042
So what has changed since version 1.x?
4143

4244
* A whole bunch of validation functions have been added (see below)
43-
* A modular design have been introduced, which means that some validation functions is default and others is part of a module
45+
* A modular design have been introduced, which means that some validation functions is default and others is
46+
part of a module.
4447
* You no longer need to prefix the validation rules with "validate_"
4548

4649

47-
### Default validators (no module needed)
48-
* **validate_url**
49-
* **validate_email**
50-
* **validate_domain***domain.com*
51-
* **validate_phone***atleast 7 digits only one hyphen and plus allowed*
52-
* **validate_float**
53-
* **validate_int**
54-
* **validate_date***yyyy-mm-dd (format can be customized, more information below)*
55-
* **validate_length***Validate that input length is in given range (length3-20)*
56-
* **validate_confirmation**
57-
* **validate_spamcheck**
58-
* **validate_ukvatnumber**
59-
* **validate_swesec***validate swedish social security number*
50+
### Default validators and features (no module needed)
51+
* **url**
52+
* **email**
53+
* **domain***domain.com*
54+
* **number***float/negative/positive*
55+
* **date***yyyy-mm-dd (format can be customized, more information below)*
56+
* **length***min/max/range*
6057
* **required***no validation except that a value has to be given*
61-
* **validate_custom***Validate value against regexp (validate_custom regexp/^[a-z]{2} [0-9]{2}$/)
62-
* **validate_num_answers***Validate that a select element has the required number of selected options (validate_num_answers num5)*
58+
* **custom***Validate value against regexp
59+
* **num_answers***Validate that a select element has the required number of selected options (num_answers num5)*
60+
* Show help information automatically when input is focused
61+
* Validate given values immediately when input is blurred.
62+
* Make validation dependent on another input of type checkbox being checked by adding attribute data-validation-if-checked="name of checkbox input"
63+
* Make validation optional by adding attribute data-validation-optional="true" to the element. This means
64+
that the validation defined in data-validation only will take place in case a value is given.
65+
* Make validation dependent on another input of type checkbox being checked by adding attribute
66+
data-validation-if-checked="name of checkbox input"
67+
* Create input suggestions with ease, no jquery-ui needed
6368

6469
### Module: security
65-
* **validate_spamcheck**
66-
* **validate_confirmation**
67-
* **validate_strength***Validate the strength of a password (validate_strength strength3)*
68-
* **validate_backend***Validate value of input on backend*
70+
* **spamcheck**
71+
* **confirmation**
72+
* **strength***Validate the strength of a password (strength strength3)*
73+
* **backend***Validate value of input on backend*
6974

7075
### Module: date
71-
* **validate_time***hh:mm*
72-
* **validate_birthdate***yyyy-mm-dd, not allowing dates in the future or dates that's older than 122 years (format can be customized, more information below)*
76+
* **time***hh:mm*
77+
* **birthdate***yyyy-mm-dd, not allowing dates in the future or dates that's older than 122 years (format can be customized, more information below)*
7378

7479
### Module: location
75-
* **validate_country**
76-
* **validate_federatestate**
77-
* **validate_longlat**
80+
* **country**
81+
* **federatestate**
82+
* **longlat**
7883
* Suggest countries (english only)
7984
* Suggest states in the US
8085

8186
### Module: sweden
82-
* **validate_swemob***validate that the value is a swedish mobile telephone number*
83-
* **validate_swesec***validate swedish social security number*
84-
* **validate_county** - *validate that the value is an existing county in Sweden*
85-
* **validate_municipality** - *validate that the value is an existing municipality in Sweden*
87+
* **swemob***validate that the value is a swedish mobile telephone number*
88+
* **swesec***validate swedish social security number*
89+
* **county** - *validate that the value is an existing county in Sweden*
90+
* **municipality** - *validate that the value is an existing municipality in Sweden*
8691
* Suggest county
8792
* Suggest municipality
8893

8994
### Module: ukvat
90-
* **validate_ukvatnumber**
91-
92-
### Misc (part of core)
93-
* Show help information automatically when input is focused
94-
* Validate given values immediately when input is blurred.
95-
* Make validation dependent on another input of type checkbox being checked by adding attribute data-validation-if-checked="name of checkbox input"
96-
* Make validation optional by adding attribute data-validation-optional="true" to the element. This means
97-
that the validation defined in data-validation only will take place in case a value is given.
98-
* Make validation dependent on another input of type checkbox being checked by adding attribute
99-
data-validation-if-checked="name of checkbox input"
100-
* Create input suggestions with ease, no jquery-ui needed
95+
* **ukvatnumber**
10196

10297

10398
## Writing a custom validator
@@ -111,11 +106,11 @@ that checks if the input contains an even number.
111106
<script src="js/formvalidator/jquery.formvalidator.min.js"></script>
112107
<script>
113108
$.formUtils.addValidator({
114-
name : 'validate_even',
109+
name : 'even',
115110
validate : function(value, $el, config, language, $form) {
116111
return parseInt(value, 10) % 2 === 0;
117112
},
118-
errorMessage : 'You have to give a even number',
113+
errorMessage : 'You have to answer an even number',
119114
errorMessageKey: 'badEvenNumber'
120115
});
121116
</script>
@@ -124,7 +119,7 @@ that checks if the input contains an even number.
124119
...
125120
<form action="" method="post" onsubmit="return $(this).validate();">
126121
<p>
127-
<input type="text" data-validation="validate_even" />
122+
<input type="text" data-validation="even" />
128123
...
129124
```
130125

@@ -184,7 +179,7 @@ It is possible to show that the value of an input is incorrect immediately when
184179
<form action="" onsubmit="return $(this).validate();" id="my_form">
185180
<p>
186181
<strong>Website:</strong>
187-
<input type="text" name="website" data-validation="validate_url" />
182+
<input type="text" name="website" data-validation="url" />
188183
</p>
189184
...
190185
</form>
@@ -326,7 +321,7 @@ $_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
326321
<form action="" onsubmit="return $(this).validate();">
327322
<p>
328323
What is the sum of <?=$_SESSION['captcha'][0]?> + <?=$_SESSION['captcha'][1]?>? (security question)
329-
<input name="captcha" data-validation="validate_spamcheck captcha<?=( $_SESSION['capthca'][0] + $_SESSION['captcha'][1] )?>"
324+
<input name="captcha" data-validation="spamcheck captcha<?=( $_SESSION['capthca'][0] + $_SESSION['captcha'][1] )?>"
330325
</p>
331326
<p><input type="submit" /></p>
332327
</form>
@@ -347,19 +342,19 @@ $_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
347342

348343
## Password confirmation example
349344
```html
350-
<p>Password: <input type="password" name="pass" data-validation="validate_confirmation" /></p>
345+
<p>Password: <input type="password" name="pass" data-validation="confirmation" /></p>
351346
<p>Confirm password: <input type="password" name="pass_confirmation" /></p>
352347
```
353348

354349
## Changelog
355350

356351
#### 2.0
357-
* validate_[min|max]_length is removed (now merged with validate_length)
358-
* validate_number, validate_int, validate_float is merged together, all three variants is now validated by validate_number
359-
* validate_phone moved to "sweden" module and renamed to validate_swephone
360-
* The attribute to be used when defining the regular expression for validate_custom is now moved to its own attribute (data-validation-regexp)
361-
* validate_length now looks at attribute data-validation-length to find out how long or short the value must be
362-
* The validation rule no longer needs to be prefixed with "validate_"
352+
* [min|max]_length is removed (now merged with length)
353+
* number, int, float is merged together, all three variants is now validated by number
354+
* phone moved to "sweden" module and renamed to swephone
355+
* The attribute to be used when defining the regular expression for custom is now moved to its own attribute (data-validation-regexp)
356+
* length now looks at attribute data-validation-length to find out how long or short the value must be
357+
* The validation rule no longer needs to be prefixed with ""
363358
* Some validation functions is moved to modules (see function reference in top of this document)
364359

365360
## Maintainer

0 commit comments

Comments
 (0)