Form validator
@@adsense
Simple
<form data-role="validator">
<label class="block">Min length control</label>
<div class="input-control text">
<input
data-validate-func="minlength"
data-validate-arg="6"
data-validate-hint="This field must contains min 6 symbols!"
type="text">
<span class="input-state-error mif-warning"></span>
<span class="input-state-success mif-checkmark"></span>
</div>
<div>
<button class="button success">Send</button>
</div>
</form>
Combine with notify system
<form
data-role="validator"
data-on-error-input="notifyOnErrorInput"
data-show-error-hint="false">
<label class="block">Combine with notify system</label>
<div class="input-control text">
<input type="text"
data-validate-func="required"
data-validate-hine="This field can not be empty!">
<span class="input-state-error mif-warning"></span>
<span class="input-state-success mif-checkmark"></span>
</div>
<div>
<button class="button success">Send</button>
</div>
</form>
<script>
function notifyOnErrorInput(input){
var message = input.data('validateHint');
$.Notify({
caption: 'Error',
content: message,
type: 'alert'
});
}
</script>
Validating functions
| Func name |
Description |
Params |
| required |
Field can not be empty |
no |
| minlength |
Control min length of value |
integer |
| maxlength |
Control max length of value |
integer |
| min |
Control min value for numeric |
number |
| max |
Control max value for numeric |
number |
| email |
Control valid email address |
no |
| url |
Control valid url address |
no |
| date |
Control valid date string |
no |
| number |
Control valid number value |
no |
| digits |
Control only digits in value |
no |
| hexcolor |
Control valid hex color value |
no |
| pattern |
Custom regexp pattern for control value |
string pattern |
Validator options
| Parameter |
Data-* |
Type |
Default value |
Description |
| showErrorState |
data-show-error-state |
boolean |
true |
If true input change color state |
| showErrorHint |
data-show-error-hint |
boolean |
true |
If true over input showing hint |
| showRequiredState |
data-show-required-state |
boolean |
true |
If true input with validate func showing with required color state |
| showSuccessState |
data-show-success-state |
boolean |
true |
If true valid input with func showing with success color state |
| hintSize |
data-hint-size |
int |
200 |
Min width of hint size |
| hintBackground |
data-hint-background |
string |
#FFFCC0 |
Hint background color, can be hex color or class name |
| hintColor |
data-hint-color |
string |
#000000 |
Hint text color, can be hex color or class name |
| hideError |
data-hide-error |
int |
2000 |
Time interval before error state disabled (msec) |
| hideHint |
data-hide-hint |
int |
5000 |
Time interval before hint hided (msec) |
| hintEasing |
data-hint-easing |
string |
easeInQuad |
Easing func for animate showing hint |
| hintEasingTime |
data-hint-easing-time |
int |
400 |
Easing animate time |
| hintMode |
data-hint-mode |
string |
hint |
Hint type, can be: hint or line |
| hintPosition |
data-hint-position |
string |
right |
Hint position, can be: right, left, top or bottom |
Hint position hint mode: hint
Hint position hint mode: line
Func examples
onSubmit
onSubmit 2
@@hit