Documentation

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:

<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

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

<form id="testForm" action="./">
    <table class="register-table">
        <tr>
            <td>Username:</td>
            <td><input type="text" id="userInput" class="text-input" /></td>
        </tr>
        <tr>
            <td>E-mail:</td>
            <td><input type="text" id="emailInput" class="text-input" /></td>
        </tr>
    </table>
</form>

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

<script type="text/javascript">
    $(document).ready(function () {
            $('#testForm').jqxValidator({ rules: [
                { input: '#userInput', message: 'Username is required!', action: 'keyup', rule: 'required' },                                   
                { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }]
    });
</script>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Validation Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#testForm').jqxValidator({ rules: [
                { input: '#userInput', message: 'The username should be more than 3 characters!', action: 'keyup', rule: 'minLength=3' },
                { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email'}], theme: 'summer'
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
<form id="testForm" action="./">
    <table class="register-table">
        <tr>
            <td>Username:</td>
            <td><input type="text" id="userInput" class="text-input" /></td>
        </tr>
        <tr>
            <td>E-mail:</td>
            <td><input type="text" id="emailInput" class="text-input" /></td>
        </tr>
    </table>
</form>
</body>
</html>

Documentation

Getting Started

Basic jqxValidator sample

The result of the above code is: