jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Change rules dynamically

Tagged: , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  nico 11 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Change rules dynamically Posts
  • March 11, 2014 at 9:01 am Change rules dynamically #50825

    nico
    Participant

    How can I switch jqxValidator rules pack.
    I need to reset rules and use some other rules. Something like this:

    <head>
	<script type="text/ecmascript">
        $(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: 'artic'
            });
        });
		
		function changeValidator() {
            $('#testForm').jqxValidator('hide');
            $('#testForm').jqxValidator(null);
			
            $('#testForm').jqxValidator({ rules: [
                { input: '#userInput', message: 'The username should be more than 6 characters!', action: 'keyup', rule: 'minLength=6' },
                { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'require'}], theme: 'artic'
            });
        }
    </script>
</head>
	
	
<body>
    <p>
		<span>Username:</span><input type="text" id="userInput" />
    </p>

    <p>
		<span>E-mail:</span><input type="text" id="emailInput" />
    </p>
    <input type="button" onclick="changeValidator()" value="switch" />
</body>
    March 11, 2014 at 10:05 am Change rules dynamically #50838

    Dimitar
    Participant

    Hello nico,

    Here is an example of dynamically changing the validator rules:

    <!DOCTYPE html>
<html lang="en">
<head>
    <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.10.2.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'
            });
            $("#changeRules").click(function () {
                $('#testForm').jqxValidator({ rules: [
                    { input: '#userInput', message: 'The username should be more than 5 characters!', action: 'keyup', rule: 'minLength=5' },
                    { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email'}], theme: 'summer'
                });
            });
        });
    </script>
</head>
<body>
    <button id="changeRules">
        Change rules</button>
    <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>

    Best Regards,
    Dimitar

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

    March 11, 2014 at 10:12 am Change rules dynamically #50840

    nico
    Participant

    Thank you

    N

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.