Skip to content

Commit 2f11ea9

Browse files
victorjonssonvictorjonsson
committed
new exmple page
2 parents f95e40e + 254dde5 commit 2f11ea9

24 files changed

+3565
-31
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.idea**

‎README.md

Lines changed: 183 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,189 @@
1+
<<<<<<< .merge_file_MDtscE
12
This plugin was created to minimize javascript logic in the html code when dealing with front-end validation of form data.
23

34
[Live example can be viewed here](http://victorjonsson.se/jquery-form-validator/?from=github)
5+
=======
6+
**jQuery Form Validator** is a feature rich jQuery plugin that makes it easy to validate user input in HTML forms
7+
while keeping your markup clean from javascript code. Even though this plugin has **a wide range of validation functions**
8+
it's designed to require as little bandwidth as possible (which makes it very suitable for **mobile websites**).
9+
This is achieved by grouping together validation functions in "modules", making it possible for the programmer
10+
to load **only those functions that's needed** to validate a particular form.
11+
>>>>>>> .merge_file_lzk9nf
412
513
*Usage example*
614

715
```html
8-
<form action="" onsubmit="return $(this).validate()">
16+
<html>
17+
<head>
18+
<script src="js/jquery.min.js"></script>
19+
<script src="js/formvalidator/jquery.formvalidator.min.js"></script>
20+
<script>
21+
$.formUtils.loadModules('date,security');
22+
</script>
23+
</head>
24+
<form action="" onsubmit="return $(this).validate();">
925
<p>
1026
Name (4 characters minimum):
1127
<input name="user" data-validation="validate_min_length length4" />
1228
</p>
1329
<p>
14-
Birthdate (yyyy-mm-dd):
30+
Birthdate (yyyy-mm-dd):
1531
<input name="birth" data-validation="validate_birthdate" />
1632
</p>
1733
<p>
18-
Website:
34+
Website:
1935
<input name="website" data-validation="validate_url" />
2036
</p>
2137
<p>
2238
<input type="submit" />
2339
</p>
24-
</form>
40+
</form>
41+
...
2542
```
2643

27-
## Features
44+
### Default validators (no module needed)
2845
* **validate_url**
29-
* **validate_date** — *yyyy-mm-dd (format can be customized, more information below)*
30-
* **validate_birthdate** — *yyyy-mm-dd, not allowing dates in the future or dates that is older then 122 years (format can be customized, more information below)*
3146
* **validate_email**
32-
* **validate_time** — *hh:mm*
3347
* **validate_domain** — *domain.com*
3448
* **validate_phone** — *atleast 7 digits only one hyphen and plus allowed*
35-
* **validate_swemob** — *validate that the value is a swedish mobile telephone number*
3649
* **validate_float**
3750
* **validate_int**
51+
* **validate_date** — *yyyy-mm-dd (format can be customized, more information below)*
3852
* **validate_length** — *Validate that input length is in given range (length3-20)*
53+
<<<<<<< .merge_file_MDtscE
3954
* **validate_confirmation**
4055
* **validate_spamcheck**
4156
* **validate_ukvatnumber**
4257
* **validate_swesec** — *validate swedish social security number*
58+
=======
59+
>>>>>>> .merge_file_lzk9nf
4360
* **required** — *no validation except that a value has to be given*
4461
* **validate_custom** — *Validate value against regexp (validate_custom regexp/^[a-z]{2} [0-9]{2}$/)
4562
* **validate_num_answers** — *Validate that a select element has the required number of selected options (validate_num_answers num5)*
4663

64+
### 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*
69+
70+
### 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)*
73+
74+
### Module: location
75+
* **validate_country**
76+
* **validate_federatestate**
77+
* **validate_longlat**
78+
* Suggest countries (english only)
79+
* Suggest states in the US
80+
81+
### 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*
86+
* Suggest county
87+
* Suggest municipality
88+
89+
### Module: ukvat
90+
* **validate_ukvatnumber**
91+
92+
### Misc (part of core)
4793
* Show help information automatically when input is focused
4894
* Validate given values immediately when input is blurred.
95+
<<<<<<< .merge_file_MDtscE
4996
* Make validation optional by adding attribute data-validation-optional="true" to the element. This means that the validation defined in data-validation only will take place in case a value is given.
5097
* Make validation dependent on another input of type checkbox being checked by adding attribute data-validation-if-checked="name of checkbox input"
98+
=======
99+
* Make validation optional by adding attribute data-validation-optional="true" to the element. This means
100+
that the validation defined in data-validation only will take place in case a value is given.
101+
* Make validation dependent on another input of type checkbox being checked by adding attribute
102+
data-validation-if-checked="name of checkbox input"
103+
* Create input suggestions with ease, no jquery-ui needed
104+
105+
106+
## Writing a custom validator
107+
You can use the function `$.formUtils.addValidator()` to add your own validation function. Here's an example of a validator
108+
that checks if the input contains an even number.
109+
110+
```html
111+
<html>
112+
<head>
113+
<script src="js/jquery.min.js"></script>
114+
<script src="js/formvalidator/jquery.formvalidator.min.js"></script>
115+
<script>
116+
$.formUtils.addValidator({
117+
name : 'validate_even',
118+
validate : function(value, $el, config, language, $form) {
119+
return parseInt(value, 10) % 2 === 0;
120+
},
121+
errorMessage : 'You have to give a even number',
122+
errorMessageKey: 'badEvenNumber'
123+
});
124+
</script>
125+
</head>
126+
<body>
127+
...
128+
<form action="" method="post" onsubmit="return $(this).validate();">
129+
<p>
130+
<input type="text" data-validation="validate_even" />
131+
...
132+
```
133+
134+
### Required properties passed into $.formUtils.addValidator
135+
136+
*name* - The name of the validator, which is used in the validation attribute of the input element.
137+
138+
*validate* - Callback function that validates the input. Should return a boolean telling if the value is considered valid or not.
139+
140+
*errorMessageKey* - Name of language property that is used in case the value of the input is invalid.
141+
142+
*errorMessage* - An alternative error message that is used if errorMessageKey is left with an empty value or isn't defined
143+
in the language object. Note that you also can use [inline error messages](#localization) in your form.
144+
145+
146+
The validation function takes these five arguments:
147+
- value — the value of the input thats being validated
148+
- $el — jQuery object referring to the input element being validated
149+
- config — Object containing the configuration of this form validation
150+
- language — Object with error dialogs
151+
- $form — jQuery object referring to the form element being validated
152+
153+
## Creating a custom module
154+
155+
A "module" is basically a javascript file containing one or more calls to [$.formUtils.addValidator()](#writing-a-custom-validator). The module file
156+
should either have the file extension *.js* (as an ordinary javascript file) or *.dev.js*.
157+
158+
Using the file extension **.dev.js** will tell *$.formUtils.loadModules* to always append a timestamp to the end of the
159+
URL, so that the browser never caches the file. You should of course never use *.dev.js* on a production website.
160+
161+
### Loading your module ###
162+
163+
```html
164+
<html>
165+
<head>
166+
<script src="js/formvalidator/jquery.formvalidator.min.js"></script>
167+
<script>
168+
$.formUtils.loadModules('mymodule.dev', 'js/validation-modules/');
169+
</script>
170+
</head>
171+
</html>
172+
...
173+
```
174+
175+
The first argument of $.formUtils.loadModules is a comma separated string with names of module files, without
176+
file extension (add .dev if the file name is for example mymodule.dev.js, this will insure that the browser never
177+
caches the javascript).
178+
179+
The second argument is the path where the module files is located. This argument is optional, if not given
180+
the module files has to be located in the same directory as the core modules shipped together with this jquery plugin
181+
(js/formvalidator/)
182+
>>>>>>> .merge_file_lzk9nf
51183
52184

53185
## Validate inputs on blur
54-
It is now possible to show that the value of an input is incorrect immediately when the input gets blurred.
186+
It is possible to show that the value of an input is incorrect immediately when the input gets blurred.
55187

56188
```html
57189
<form action="" onsubmit="return $(this).validate();" id="my_form">
@@ -61,50 +193,53 @@ It is now possible to show that the value of an input is incorrect immediately w
61193
</p>
62194
...
63195
</form>
64-
65196
<script>
66197
$('#my_form').validateOnBlur();
67198
</script>
68199
```
69200

70201
## Show help information
71-
Since version 1.1 it is possible to display help information for each input. The information will fade in when input is focused and fade out when input is blurred.
202+
It is possible to display help information for each input. The information will fade in when input is focused and fade out when input is blurred.
72203

73204
```html
74205
<form action="" onsubmit="return $(this).validate();" id="my_form">
75206
<p>
207+
<<<<<<< .merge_file_MDtscE
76208
<strong>Why not:</strong>
77209
<textarea name="why" data-validation-help="Please give us some more information" data-validation="required"></textarea>
210+
=======
211+
<strong>Why not?</strong>
212+
<textarea data-help="Please give us some more information" data-validation="required"></textarea>
213+
>>>>>>> .merge_file_lzk9nf
78214
</p>
79215
...
80216
</form>
81-
82217
<script>
83218
$('#my_form').showHelpOnFocus();
84219
</script>
85220
```
86221

87-
## Fully customizable
222+
## Fully customizable
88223
```javascript
89224
var myConf = {
90225
// Name of element attribute holding the validation rules (default is data-validation)
91226
validationRuleAttribute : 'class',
92227

93-
// Names of inputs not to be validated even though the element attribute containing
228+
// Names of inputs not to be validated even though the element attribute containing
94229
// the validation rules tells us to
95230
ignore : ['som-name', 'other-name'],
96231

97232
// Class that will be put on elements which value is invalid (default is 'error')
98-
errorElementClass : 'error',
233+
errorElementClass : 'error',
99234

100-
// Border color of elements which value is invalid, empty string to leave border
235+
// Border color of elements which value is invalid, empty string to leave border
101236
// color as it is
102-
borderColorOnError : '#FFF',
237+
borderColorOnError : '#FFF',
103238

104239
// Class of div container showing error messages (defualt is 'error_message')
105240
errorMessageClass : 'error_message',
106241

107-
// Position of error messages. Set the value to "top" if you want the error messages
242+
// Position of error messages. Set the value to "top" if you want the error messages
108243
// to be displayed in the top of the form. Otherwise you can set the value to
109244
// "element", each error message will then be displayed beside the input field that
110245
// it is refering to (default is 'top')
@@ -113,7 +248,7 @@ var myConf = {
113248
// Date format used when validating dates and birthdate. (default is yyyy-mm-dd)
114249
dateFormat : 'dd/mm/yyyy',
115250

116-
// Window automatically scrolls to the top of the form when submitted data is
251+
// Window automatically scrolls to the top of the form when submitted data is
117252
// invalid (default is true)
118253
scrollToTopOnError : false,
119254

@@ -124,7 +259,7 @@ var myConf = {
124259
};
125260

126261
var myLang = {
127-
errorTitle : 'Något gick fel',
262+
errorTitle : 'Något gick fel',
128263
requiredFields : 'Du fyllde inte i alla fält markerade med *'
129264
};
130265

@@ -137,21 +272,24 @@ $('#my_form')
137272
```
138273

139274
## Localization
140-
All error dialogs can be overwritten by passing an object into the validation function.
275+
This plugin contains a set of error dialogs. In case you don't define an inline error message the plugin
276+
will fall back on one of the dialogs below. You can how ever add the attribute *data-validation-error-msg* to an
277+
element, and that message will be displayed instead. All error dialogs can be overwritten by passing an
278+
object into the validation function.
141279

142280
```javascript
143-
var jQueryFormLang = {
281+
var enErrorDialogs = {
144282
errorTitle : 'Form submission failed!',
145283
requiredFields : 'You have not answered all required fields',
146284
badTime : 'You have not given a correct time',
147285
badEmail : 'You have not given a correct e-mail address',
148286
badTelephone : 'You have not given a correct phone number',
149287
badSecurityAnswer : 'You have not given a correct answer to the security question',
150288
badDate : 'You have not given a correct date',
151-
toLongStart : 'You have given an answer longer than ',
152-
toLongEnd : ' characters',
153-
toShortStart : 'You have given an answer shorter than ',
154-
toShortEnd : ' characters',
289+
tooLongStart : 'You have given an answer longer than ',
290+
tooLongEnd : ' characters',
291+
tooShortStart : 'You have given an answer shorter than ',
292+
tooShortEnd : ' characters',
155293
badLength : 'You have to give an answer between ',
156294
notConfirmed : 'Values could not be confirmed',
157295
badDomain : 'Incorrect domain value',
@@ -175,7 +313,7 @@ var jQueryFormLang = {
175313
<head>
176314
<body>
177315
...
178-
<form action="script.php" onsubmit="return $(this).validate(jQueryFormLang);">
316+
<form action="script.php" onsubmit="return $(this).validate(enErrorDialogs);">
179317
...
180318
```
181319

@@ -223,10 +361,27 @@ $_SESSION['captcha'] = array( mt_rand(0,9), mt_rand(1, 9) );
223361
<p>Confirm password: <input type="password" name="pass_confirmation" /></p>
224362
```
225363

364+
<<<<<<< .merge_file_MDtscE
226365
## Credits
227366
[Victor Jonsson](https://github.com/victorjonsson)<br />
367+
=======
368+
## Changelog
369+
370+
### 2.0
371+
* validate_[min|max]_length is removed (now merged with validate_length)
372+
* validate_number, validate_int, validate_float is merged together, all three variants is now validated by validate_number
373+
* validate_phone moved to "sweden" module and renamed to validate_swephone
374+
* The attribute to be used when defining the regular expression for validate_custom is now moved to its own attribute
375+
* validate_length now looks at attribute data-validation-length to find out how long or short the value must be
376+
377+
## Contributors
378+
>>>>>>> .merge_file_lzk9nf
228379
[Joel Sutherland](https://github.com/robamaton) (contributor)<br />
229380
[Steve Wasiura](https://github.com/stevewasiura) (contributor)<br />
230381
[Matt Clements](https://github.com/mattclements) (contributor)<br />
231382
[dfcplc](https://github.com/dfcplc) (contributor)<br />
383+
<<<<<<< .merge_file_MDtscE
384+
=======
385+
[Darren Mason](http://www.mypocket-technologies.com) (Password strength meter)<br />
386+
>>>>>>> .merge_file_lzk9nf
232387
[Scott Gonzales](http://projects.scottsplayground.com/iri/) (URL regexp)

0 commit comments

Comments
 (0)