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" |
