Blogs

In this post we will show you, how to validate a simple HTML Form with the jqxValidator plug-in. 1. Include the JavaScript and CSS dependencies. Before closing the head tag, add these lines of code:

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.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" src="../../jqwidgets/jqxbuttons.js"></script> 

2. In the HTML markup, create the HTML Form which will be validated.

<div><h3>Register</h3></div>
<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>Password:</td>
            <td><input type="password" id="passwordInput" class="text-input" /></td>
        </tr>
        <tr>
            <td>Confirm password:</td>
            <td><input type="password" id="passwordConfirmInput" class="text-input" /></td>
        </tr>
        <tr>
            <td>E-mail:</td>
            <td><input type="text" id="emailInput" class="text-input" /></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="button" value="Send" id="sendButton" />
            </td>
        </tr>
    </table>
</form>

3. Initialize the jqxValidator plug-in. There are four inputs in the HTML Form to be validated. One for username, two for password (password and password confirmation) and an e-mail address. We will create validation rules for all of these input fields. Add the following JavaScript before closing the head tag:

<script type="text/javascript">
    $(document).ready(function () {
        $('#sendButton').jqxButton({ width: 60, height: 25, theme: 'classic' });
        $('#sendButton').bind('click', function () {
            $('#testForm').jqxValidator('validate');
        });
        $('#testForm').jqxValidator({
         rules: [
                { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' },
                { input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup', rule: 'length=4,12' },
                { input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function (input) {
                    if (input.val() === $('#passwordInput').val()) {
                        return true;
                    }
                    return false;
                }
                },
                { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' }], theme: 'classic'
        });
    });
</script>

In the code above, we initialize the jqxButton and add an event listener for its click event. In the callback function, we call the jqxValidator’s ‘validate’ method. After that, we initialize the jqxValidator plug-in with four rules (one for each input field). The first validation rule restricts the username’s length (it should be between 3 and 12 characters). The validation’s action is set to ‘keyup’. This means that the user’s input will be validated when the user presses a key. The second rule restricts the password’s length (between 4 and 12). The third rule is custom. It checks whether the confirmation password is the same as the password. The last rule validates the user’s e-mail. If the entered e-mail is not valid, the “Invalid e-mail” message will we displayed next to the e-mail’s input.