Dynamic Adding to Validator Rules

[m13badryMember]

Hi,
I need to use the validator and add some more rules to the jqxValidator after the selector has been loaded to the DOM.
Let me explain what I am trying to do, I am creating a form that has 2 select boxes that will be loaded later on from AJAX so the select box selectors aren’t defined yet when loading the initial form. So my question is there a way to add more rules to the validator after it has been initialized?

[MinkoBlocked]

Hello m13badry,

In the following example new rule to the jqxValidator is added after it was initialized:

JavaScript

$(document).ready(function () {
    var theme = 'classic',
        rules = [{ input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
                    { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' }];
    $('#sendButton').jqxButton({ width: 60, height: 25, theme: theme });
    $("#register").jqxExpander({ width: '300px', theme: theme, showArrow: false, toggleMode: 'none' });
            
    //On click calling the validate method of the jqxValidator
    $('#sendButton').bind('click', function () {
        $('#testForm').jqxValidator('validate');
    });
    // initialize validator.
    $('#testForm').jqxValidator({
        rules: rules, theme: theme
    });
    //Append a new row to the table
    $('#registerTable').children('tbody').prepend(
    '<tr><td>New input:</td><td><input type="text" id="numberInput" /></td></tr>'
    );
    //Append new rule
    rules.push(
        { input: '#numberInput', message: 'This value is required!', action: 'keyup', rule: 'required' }
    );
    //Update jqxValidator's rules
    $('#testForm').jqxValidator('rules', rules);
});

HTML

<div id="register">
    <div><strong>Register</strong></div>
    <div>
        <form id="testForm" action="./">
            <table id="registerTable">
                <tr>
                    <td>Username:</td>
                    <td><input type="text" id="userInput" /></td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;"><input type="button" value="Send" id="sendButton" /></td>
                </tr>
            </table>
        </form>
    </div>
</div>

In the code above first the variable rules is initialized with all rules we need at the beginning, after that the jqxValidator is initialized with it and with specific theme. Later new row is appended to the table inside the form which we want to validate. New rule is pushed in the rules array and at last jqxValidator’s rules are updated.

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[robfParticipant]

Hello,
Is there support to use the jqxValidator with the jqxGrid/ For example, if one were to auto-populate a grid from a JSON file and then wanted to validate each cell for a specific rule – e.g. email, integer with min 5 chars, etc. Ideally, the cell would highlight to indicate that there is a validation issue.

Seems the jqxValidator works on forms but the grid is filled w/div elements so I’m not sure if this is feasible.

Any ideas?

Thanks.
Rob

[Peter StoevKeymaster]

Hi Rob,

jqxGrid has its own validation which is demonstrated in the Editing demos.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts