This time I will share jQuery Plugin and tutorial about Minimal Form Field Validation Plugin For jQuery – Validin, hope it will help you in programming stack.
Validin is a lightweight, easy-to-use jQuery plugin used to validate various types of form fields using regular expressions.
Built-in validate rules:
- alpha: only letters
- alpha_num: letters and numbers
- alpha_space: letters
- alpha_dash: letters, underscores and hyphens
- alpha_num_dash: letters, numbers, underscores and hyphens
- number: valid whole number
- decimal: valid number
- name: valid name
- email: valid email address
- url: valid URL
- phone: valid phone number
- zip: valid zip code
- creditcard: valid credit card number
- min: at least %i
- ma: no more than %i
- min_length: at least %i characters long
- max_length: no more than %i characters long
- match: These values have to match
How to use it:
1. To use this plugin, you first need to load the JavaScript file ‘validin.js’ after you’ve loaded jQuery library:
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "validin.js" ></ script > |
2. Call the function on the target form element and the jQuery Validin is ready for use.
3. Add the validate="Rule Name"
attribute to the form fields as these:
03 |
< input validate = "alpha" > |
04 |
< input validate = "alpha_num" > |
05 |
< input validate = "alpha_space" > |
06 |
< input validate = "alpha_dash" > |
07 |
< input validate = "alpha_num_dash" > |
08 |
< input validate = "number" > |
09 |
< input validate = "decimal" > |
10 |
< input validate = "name" > |
11 |
< input validate = "email" > |
12 |
< input validate = "url" > |
13 |
< input validate = "phone" > |
14 |
< input validate = "zip" > |
15 |
< input validate = "creditcard" > |
16 |
< input validate = "min:5" > |
17 |
< input validate = "max:5" > |
18 |
< input validate = "min_length:5" > |
19 |
< input validate = "max_length:5" > |
20 |
< input class = "must_match" > |
21 |
< input validate = "match:.must_match" > |
3. You can also define your own validation rules using regex.
1 |
< input validate = "regex:/[0-9a-z]{1,3}-d*/i" > |
4. Style the error message and form fields when invalid.
1 |
input.invalid { border-color : #ff7a7a ; } |
7 |
text-transform : uppercase ; |
5. Customize the default validation rules and error messages.
05 |
'error_message' : "This can only contain only letters" |
08 |
'regex' : /[A-Z0-9]*/i, |
09 |
'error_message' : "This can only contain letters and numbers" |
13 |
'error_message' : "This can only contain letters" |
16 |
'regex' : /[A-Z.-_]*/i, |
17 |
'error_message' : "This can only contain letters, underscores and hyphens" |
20 |
'regex' : /[A-Z0-9.-_]*/i, |
21 |
'error_message' : "This can only contain letters, numbers, underscores and hyphens" |
25 |
'error_message' : "This needs to be a valid whole number" |
29 |
'error_message' : "This needs to be a valid number" |
32 |
'regex' : /[A-Z.- 's]*/i, |
33 |
' error_message ': "This needs to be a valid name" |
36 |
' regex ': /[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/i, |
37 |
' error_message ': "This needs to be a valid email address" |
40 |
' regex ': /(https?|ftp)://[^s/$.?#].[^s]*/i, |
41 |
' error_message ': "This needs to be a valid URL" |
44 |
' regex ': /(?=.*?d{3}( |-|.)?d{4})((?:+?(?:1)(?:1|s*?))?(?:(?:d{3}s*?)|(?:((?:d{3}))s*?))1?(?:d{3})1?(?:d{4})(?:s*?(?:#|(?:ext.?))(?:d{1,5}))?)b/i, |
45 |
' error_message ': "This needs to be a valid phone number" |