jqxValidator Test

by JC Wren

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<form id="testForm" action="./">
    <table>
        <tr>
            <td>Username:</td>
            <td>
                <input type="text" id="userInput" class="text-input" />
            </td>
        </tr>
        <tr>
            <td>Typed:</td>
            <td>
                <div id="copy"></div>
            </td>
    </table>
    <table
    <div id="copy">
    </div>
</form>

CSS

.text-input {
    height: 21px;
    width: 150px;
}

JavaScript

$('#userInput').jqxInput({
    theme: 'energyblue'
});
$('#testForm').jqxValidator({
    rules: [{
        input: '#userInput',
        message: 'Username cannot be empty',
        action: 'keyup, blur',
        rule: 'required'
    }, {
        input: '#userInput',
        message: 'Username has illegal characters!',
        action: 'keyup, blur',
        rule: function () {
            var text = $('#userInput').jqxInput('value');
            var res = text.match(/[^A-Za-z]/);
            var ret = (res && res.length) ? false : true;
            $('#copy').html (text);
        }
    }]
});