Form validator

Advertising on the website of the project allows the project to evolve. Support the project, please disable ad blocker.

@@adsense

This widget makes simple clientside form validation easy, whilst still offering plenty of customization options. The widget comes bundled with a useful set of validation methods, including URL, email, hex color, min and max values, length validation.

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