Skip to content

Commit 4327ed4

Browse files
bnabrissbnabriss
committed
Update docs
1 parent 3c33d09 commit 4327ed4

File tree

1 file changed

+99
-2
lines changed

1 file changed

+99
-2
lines changed

‎README.md‎

Lines changed: 99 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ https://raw.githubusercontent.com/bnabriss/jquery-form-validation/master/dist/jq
1515

1616
#### Simple usage
1717

18-
##### html
18+
###### html
1919
```html
2020
<form>
2121
<div class="form-group">
2222
<input class="form-control" data-validator="required|min:4|max:10">
2323
</div>
2424
</form>
2525
```
26-
##### javascript
26+
###### javascript
2727
```javascript
2828
$(document).on('blur', '[data-validator]', function () {
2929
new Validator($(this));
@@ -75,3 +75,100 @@ you can specify some rules as warning errors, this completable with bootstrap 3
7575
</form>
7676
```
7777

78+
### Available Validation Rules
79+
80+
| Rule | example | description |
81+
| ------------- | :------:|------|
82+
| required | `required` | The field under validation must be present in the input data and not empty |
83+
| numeric | `numeric` | The field under validation must be numeric |
84+
| integer | `integer` | The field under validation must be an integer |
85+
| between_numeric | `between_numeric:10,40` | The numeric field under validation must be between the given two values |
86+
| max_numeric | `max_numeric:60` | The numeric field under validation must less than or equal the given value |
87+
| min_numeric | `min_numeric:10` | The numeric field under validation must greater than or equal the given value |
88+
| size_numeric | `size_numeric:10` | The numeric field under validation must exactly equal the given value |
89+
| between | `between:2,10` | The field length must between the two given values |
90+
| max | `max:10` | The field length must less than or equal the given value |
91+
| min | `min:2` | The field length must greater than or equal the given value |
92+
| size | `size:6` | The field length must exactly equal the given value |
93+
| date | `date` | The field must be valid date syntax (`new Date()`) |
94+
| before | `before:2015-01-01` | The date value must be older than the given value |
95+
| before_or_equal | `before_or_equal:2018-12-01 14:00:00` | The date value must be older than or equal the given value |
96+
| after | `after:2015-01-01` | The date value must be newer than the given value |
97+
| after_or_equal | `after_or_equal:2018-12-01 14:00:00` | The date value must be newer than or equal the given value |
98+
| email | `email` | The field under validation must be formatted as an e-mail address |
99+
| in | `in:male,female,...` | The field under validation must be included in the given list of values |
100+
| not_in | `not_in:foo,bar,...` | The field under validation must not be included any of the given list of values |
101+
| regex | `regex:[A-Z0-9]{6}` | The field under validation must match the given regular expression |
102+
| different | `different:old_password` | The field under validation must have a different value than field with the given field `name` (attribute) |
103+
| same | `same:password` | The field under validation must exactly the same value of the field with the given field `name` (attribute) |
104+
| required_if | `required_if:old_password` | The field under validation must have a value if the field with the given `name` (attribute) is entered |
105+
| required_if_val | `required_if_val:password,123456` | The field under validation must have a value if the field with the given `name` (attribute) has exactly the given value |
106+
| url | `url` | The field under validation must be a valid URL |
107+
108+
#### Custom errors
109+
you can bind the `Validator` object with your custom check function.
110+
```javascript
111+
Validator.prototype.valid_user_name = function (customLength) {
112+
if (this.val && customLength /*...*/){
113+
// ...
114+
return true;
115+
}
116+
return false;
117+
};
118+
```
119+
and to use it in your forms
120+
```html
121+
<form>
122+
<div class="form-group">
123+
<input class="form-control" data-validator="valid_user_name:8">
124+
</div>
125+
</form>
126+
```
127+
128+
### Existing error messages
129+
The previous listed errors already has it's errors messages (English)
130+
```javascript
131+
Validator.prototype.language = {
132+
numeric: 'The {label} must be a number.',
133+
integer: 'The {label} must be an integer.',
134+
between_numeric: 'The {label} must be between {param0} and {param1}.',
135+
max_numeric: 'The {label} may not be greater than {param0}.',
136+
min_numeric: 'The {label} must be at least {param0}.',
137+
size_numeric: 'The {label} must be {param0}.',
138+
between: 'The {label} must be between {param0} and {param1} characters.',
139+
max: 'The {label} may not be greater than {param0} characters.',
140+
min: 'The {label} must be at least {param0} characters.',
141+
size: 'The {label} must be {param0} characters.',
142+
date: 'The {label} must be a date after {param0}.',
143+
before: 'The {label} must be a date before {param0}.',
144+
before_or_equal: 'The {label} must be a date before or equal to {param0}.',
145+
after: 'The {label} must be a date after {param0}.',
146+
after_or_equal: 'The {label} must be a date after or equal to {param0}.',
147+
age: 'The age should be more than {param0}.',
148+
email: 'The {label} must be a valid email address.',
149+
in: 'The selected {label} is invalid.',
150+
not_in: 'The selected {label} is invalid.',
151+
different: 'The {label} and {otherLabel} must be different.',
152+
required: 'The {label} field is required..',
153+
required_if: 'The {label} field is required when {otherLabel} is filled.',
154+
required_if_val: 'The {label} field is required when {otherLabel} is {param0}',
155+
same: 'The {label} and {otherLabel} must match.',
156+
url: 'The {label} format is invalid.',
157+
regex: 'The {label} format is invalid.'
158+
}
159+
```
160+
#### Bind error message
161+
you can simply override the given messages using prototype object, and note that the key of the message is exactly the same of the function name, so when you add your custom validator you should add the suitable key language if you want to show the error
162+
```javascript
163+
Validator.prototype.language = {/* your custom error messages */}
164+
```
165+
or you can merge exiting errors with additional messages using options parameter in the constructor
166+
```javascript
167+
$(document).on('blur', '[data-validator]', function () {
168+
new Validator($(this), {
169+
language : {
170+
valid_user_name : 'The {label} should have a valid user name with length of {param0}'
171+
}
172+
});
173+
});
174+
```

0 commit comments

Comments
 (0)