Getting Started

jqxValidator is jQWidgets plugin used for validating html forms using JavaScript. It has a set of build in rules (for required inputs, e-mail, SSN, ZIP, max value, min value, interval etc.) used for validating the user inputs. You can also write a custom rule which will fit best to your requirements.
Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the JavaScript files and CSS dependencies to your project. The jqxValidator widget requires the following files:


The next step is to create a form you want to validate:

The last step is to initialize the widget by adding the following script to the html document:

To call a function (method), you need to pass the method name and parameters (if any) in the jqxValidator’s constructor.
$("#form").jqxValidator('validate');
    
To get the result of a function (method) call, you need to pass the method name in the jqxValidator’s constructor and parameters (if any).
$("#form").jqxValidator('validateInput', '#userInput');
    
To set a property(option), you need to pass the property name and value(s) in the jqxValidator's constructor.
$("#form").jqxValidator({ focus: true });
    
To get a property(option), you need to pass the property name to the jqxValidator's constructor.
var duration = $("#form").jqxValidator('scrollDuration');
    
To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to get the selected item when the user clicks. The example code below demonstrates how to bind to the ‘validatorError’ event of jqxValidator.
$('#form').on('validationError', function (event) {
    alert('Error while validating!');
});
    

Basic jqxValidator sample

The result of the above code is: