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
Multi func
<input type="text" data-validate-func="required, number">
<input type="text"
data-validate-func="required, number, minlength"
data-validate-arg=",,6">
onSubmit
onSubmit 2