jQuery Validator API

Name Type Default

arrow Boolean true

Sets or gets whether the arrow of the hints will be shown.

Code examples

Set the arrow property.

$('#jqxValidator').jqxValidator( { arrow: false } );

Get the arrow property.

var arrow = $('#jqxValidator').jqxValidator('arrow');

Try it: arrow is set to false

animation String 'fade'

Sets or gets the animation of showing, hiding the hints.

Possible Values:

'fade'

'none'

Code examples

Initialize a jqxValidator with the animation property specified.

$('#jqxValidator').jqxValidator({ animation: 'none' });

Get the animation property.

var animation = $('#jqxValidator').jqxValidator('animation');

Try it: animation is set to 'none'

animationDuration Number 150

Sets or gets the duration of the animation used for showing/hiding the hints.

Code examples

Set the animationDuration property.

$('#jqxValidator').jqxValidator({ animationDuration: 300 });

Get the animationDuration property.

var animationDuration = $('#jqxValidator').jqxValidator('animationDuration');

Try it: animationDuration is set to 3000

closeOnClick Boolean true

Sets or gets whether the hints will be closed when the user click on them.

Code examples

Set the closeOnClick property.

$('#jqxValidator').jqxValidator({ closeOnClick: false });

Get the closeOnClick property.

var closeOnClick = $('#jqxValidator').jqxValidator('closeOnClick');

Try it: closeOnClick is set to false

focus Boolean true

Sets or gets whether the jqxValidator will focus the first invalid input.

Code examples

Set the focus property.

$('#jqxValidator').jqxValidator( { focus: false } );

Get the focus property.

var focus = $('#jqxValidator').jqxValidator('focus');

Try it: focus is set to false

hintType String "tooltip"

Sets or gets the hint type. Possible values: 'tooltip' and 'label'.

Code example

Set the hintType property.

$('#jqxValidator').jqxValidator({hintType : 'label'});

Get the hintType property.

var hintType = $('#jqxValidator').jqxValidator('hintType');

Try it: hintType is set to 'label'

onError Function null

Sets or gets callback which will be called on validation error.

Code examples

Set the onError property .

$('#jqxValidator').jqxValidator({ onError: function () { alert('You havent filled the form correctly!'); } });

Get the onError property.

var onError = $('#jqxValidator').jqxValidator('onError');

Try it: onError is set to a custom function

onSuccess Function null

Sets or gets the callback which will be executed on success.

Code examples

Set the onSuccess property.

$('#jqxValidator').jqxValidator({ onSuccess: function () { alert('Success!'); } });

Get the onSuccess property.

var onSuccess = $('#jqxValidator').jqxValidator('onSuccess');

Try it: onSuccess is set to a custom function

position String 'right'

Sets or gets the default position of the hints.

Code examples

Set the position property.

$('#jqxValidator').jqxValidator({ position: 'topcenter' });

Get the position property.

var position = $('#jqxValidator').jqxValidator('position');

Try it: position is set to 'left'

rules Array []

Sets jqxValidator rules. Format of a single rule is as follows:


{ input: 'selector-of-the-input', 
    message: 'Custom message on error', 
    action: 'Custom action (keyup, change...etc)', 
    rule: 'Build rule (ssn, phone, email...) or custom function', 
    position: 'Position of the hint (format pos:x,y)', 
    hintRender: 'Function for hint rendering' }

Let's look at all different properties of a single rule.
The input property must be selector of the input you want to validate (we recommend to use ids - example: '#userInput').
The message property is the custom message which will popup, on validation error, for the current rule.
Action is a string which is the event on which you want to validate the input (for example click, mouseup, blur, keyup...).
The rule property is defining the way you want to validate the input.

In jqxValidator there are built in rules like: 'ssn', 'email', 'required', 'phone', 'zipCode', 'maxLength=len', 'minLength=len', 'length=max,min'. In the last three validation rules the strings after the "=" are the rule parameters, for example: 'maxLength=13'. You can also write a function for a custom rule.

'ssn' - 'Social Security Number' Requires input like: ___-__-____
'email' - requires valid e-mail address.
'required' - requires a CheckBox or Radio Button to be checked or any value to be entered in an Input.
'phone' - requires input like: (___)___-____
'zipCode' - requires a valid zip code like: ___-__-____
'maxLength=len' - restricts the maximum input characters to 'len'.
'minLength=len' - restricts the minimum input characters to 'len'
'length=min,max' - restricts the input length to a specific range.

Hint positions are as follows: 'left', 'right', 'top', 'bottom', 'bottomcenter', 'topcenter', 'topleft', 'topright', 'bottomleft', 'bottomright'. If you wish to set also an offset you can pass the position like: 'topleft:15,3'. This is going to position your message popup in top-left of the input with offset: left - 15px, top - 3px.

The last property is hintRender. This is function used for hint rendering. If you don't pass one the default is going to be used. Notice that the position and hintRender are optional. If you don't set them the default values are going to be used.

Code examples

Initialize a jqxValidator with the rules property specified.


$('#form').jqxValidator( { rules: [{ input: '#passwordInput', 
                                        message: 'The password is required!',
                                        action: 'keyup', 
                                        rule: 'required' },
                                    { input: '#passwordInput', 
                                        message: 'Your password must be between 4 and 12 characters!', 
                                        action: 'keyup', 
                                        rule: 'length=4,12' }] } );

Custom Rule Definition. The function returns true or false depending on whether the input is correct or not.


{ input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2012.', action: 'valuechanged', rule: function () {
    var date = $('#birthInput').jqxDateTimeInput('value');
    var result = date.dateTime.getFullYear() >= 1900 && date.dateTime.getFullYear() <= 2012;
    return result;
}

Set the hintRender property of a rule.


$('#sendButton').on('click', function () {
    $('#testForm').jqxValidator('validate');
});

var that = this;
var render = function (message, input) {
    if (that._message) {
        that._message.remove();
    }
    that._message = $("<span style='background: red; color: white;'>" + message + "</span>")
    that._message.appendTo($(document.body));
    return that._message;
}

    $('#testForm').jqxValidator({
    rules: [
        { input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required', hintRender: render },
        { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12', hintRender: render }
]});

Try it: rules is set to a custom function

rtl Boolean false

Sets or gets a value indicating whether the validation messages are displayed from the left side instead of the right.

Code example

Set the rtl property.

$('#jqxValidator').jqxValidator({rtl : true});

Get the rtl property.

var rtl = $('#jqxValidator').jqxValidator('rtl');

Try it: rtl is set to true

validationError Event

This is triggered when the form is validated with some errors.

Code examples

Bind to the validationError event.

$('#jqxValidator').on('validationError', function (event) { // Some code here. });

Try it: Bind to the validationError event by type jqxValidator.

validationSuccess Event

This is triggered when the form is validated whithout any errors.

Code examples

Bind to the validationSuccess event.

$('#jqxValidator').on('validationSuccess', function (event) { // Some code here. });

Try it: Bind to the validationSuccess event by type jqxValidator.

hideHint Method

Hide all hints for a specific input.

Parameter	Type	Description
id	String

Return Value
None

Code example

Invoke the hideHint method.

$('#jqxValidator').jqxValidator('hideHint', '#passwordInput');

Try it: hides all hints for a specific input in the jqxValidator.

hide Method

Hiding all hints for the current form.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the hide method.

$('#jqxValidator').jqxValidator('hide');

Try it: hides all hints in the jqxValidator.

updatePosition Method

Updating the positions of all hints. This is useful for example on window resize.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the checkItem method.

$('#jqxValidator').jqxValidator('updatePosition');

Try it: updates a position of all hints in the jqxValidator.

validate Method

Validating the whole form.

Parameter	Type	Description
html element	Object

Return Value
None

Code example

Invoke the validate method.

$('#jqxValidator').jqxValidator('validate', element);

Try it: validates the jqxValidator.

validateInput Method

Validates a single input. This method accepts a single parameter which is selector of the input you want to validate. Notice that this selector should be the same like the one you've passed in the rules array.

Parameter	Type	Description
id	String

Return Value
None

Code example

Invoke the validateInput method.

$('#jqxValidator').jqxValidator('validateInput', '#passwordInput');

Try it: validates an input the jqxValidator.

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Code example

Events

Code examples

Code examples

Methods

Code example

Code example

Code example

Code example

Code example