jQWidgets Forums

jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › two buttons with one validator

Tagged: , , , ,

This topic contains 8 replies, has 2 voices, and was last updated by  Peter Stoev 11 years, 3 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    two buttons with one validator Posts
  • February 9, 2014 at 7:55 am two buttons with one validator #49176

    mallepaddi
    Participant

    Hi

    Is it possible to do the following ..

    Having two buttons like “Draft” / “Create”, both are in the same form with same validation rule but validation success should trigger two different actions based on button click.

    How to do that, please help

    Thanks

    February 10, 2014 at 6:09 am two buttons with one validator #49200

    Peter Stoev
    Keymaster

    Hi mallepaddi,

    If you implemented custom rules, I suppose that you can have a Boolean flag inside the custom rules. Other solution could be to dynamically set the jqxValidator’s rules property to a different set of validation rules.

    Please check out the following example, based on the demo Default Functionality:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var buttonFlag = 0;
            $("#register").jqxExpander({ toggleMode: 'none', width: '300px', showArrow: false, theme: theme });
            $('#sendButton').jqxButton({ width: 60, height: 25, theme: theme });
            $('#previewButton').jqxButton({ width: 60, height: 25, theme: theme });
            $('#acceptInput').jqxCheckBox({ width: 130, theme: theme });

            $('#sendButton').on('click', function () {
                buttonFlag = 1;
                $('#testForm').jqxValidator('validate');
            });
            $('#previewButton').on('click', function () {
                buttonFlag = 2;
                $('#testForm').jqxValidator('validate');
            });
            $("#ssnInput").jqxMaskedInput({ mask: '###-##-####', width: 150, height: 22, theme: theme });
            $("#phoneInput").jqxMaskedInput({ mask: '(###)###-####', width: 150, height: 22, theme: theme });
            $("#zipInput").jqxMaskedInput({ mask: '#####-####', width: 150, height: 22, theme: theme });

            $('.text-input').jqxInput({ theme: theme });

            var date = new Date();
            date.setFullYear(2000, 0, 1);
            $('#birthInput').jqxDateTimeInput({ theme: theme, height: 22, value: $.jqx._jqxDateTimeInput.getDateTime(date) });

            // initialize validator.
            $('#testForm').jqxValidator({
                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, blur', rule: 'length=3,12' },
                       { input: '#realNameInput', message: 'Real Name is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' },
                       { input: '#realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' },
                       {
                           input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2012.', action: 'valuechanged', rule: function (input, commit) {
                               var date = $('#birthInput').jqxDateTimeInput('value');
                               var result = date.getFullYear() >= 1900 && date.getFullYear() <= 2012;
                               // call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                               return result;
                           }
                       },
                       { input: '#passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup, blur', rule: 'length=4,12' },
                       { input: '#passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
                       {
                           input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function (input, commit) {
                               // call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                               if (input.val() === $('#passwordInput').val()) {
                                   return true;
                               }
                               return false;
                           }
                       },
                       { input: '#emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
                       { input: '#ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn' },
                       { input: '#phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
                       { input: '#zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' },
                       { input: '#acceptInput', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'right:0,0'}], theme: theme
            });
            $('#testForm').on('validationSuccess', function (event) {
                if (buttonFlag == 1) {
                    alert("Clicked Send");
                } else if (buttonFlag == 2) {
                    alert("Clicked Preview");
                };
                buttonFlag = 0;
            });
            $('#jqxValidator').on('validationError', function (event) {
                buttonFlag = 0;
            });
        });
    </script>
    <style type="text/css">
        .text-input
        {
            height: 21px;
            width: 150px;
        }
        .register-table
        {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .register-table td, .register-table tr
        {
            margin: 0px;
            padding: 2px;
            border-spacing: 0px;
            border-collapse: collapse;
            font-family: Verdana;
            font-size: 12px;
        }
        h3
        {
            display: inline-block;
            margin: 0px;
        }
    </style>
</head>
<body class='default'>
    <div id="register">
        <div>
            <h3>
                Register</h3>
        </div>
        <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>
                        Real name:
                    </td>
                    <td>
                        <input type="text" id="realNameInput" class="text-input" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Birth date:
                    </td>
                    <td>
                        <div id="birthInput">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        E-mail:
                    </td>
                    <td>
                        <input type="text" id="emailInput" placeholder="someone@mail.com" class="text-input" />
                    </td>
                </tr>
                <tr>
                    <td>
                        SSN:
                    </td>
                    <td>
                        <div id="ssnInput">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Phone:
                    </td>
                    <td>
                        <div id="phoneInput">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        Zip code:
                    </td>
                    <td>
                        <div id="zipInput">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="padding: 5px;">
                        <div id="acceptInput" style="margin-left: 50px;">
                            I accept terms</div>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <input type="button" value="Send" id="sendButton" />
                    </td>
                    <td style="text-align: center;">
                        <input type="button" value="Preview" id="previewButton" />
                    </td>
                </tr>
            </table>
            </form>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Peter Stoev

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

    February 10, 2014 at 2:53 pm two buttons with one validator #49262

    mallepaddi
    Participant

    Hi

    Thanks for your input.

    for second approach .. shall i use as below ..to call rules dynamically like ..

    if(flag == 0)
    $(‘#testForm’).jqxValidator({ … })
    else
    $(‘#testForm’).jqxValidator({ … })

    and .. what “element” in below statement ?
    $(‘#jqxValidator’).jqxValidator(‘validate’, element);

    Thanks

    February 16, 2014 at 4:14 pm two buttons with one validator #49583

    mallepaddi
    Participant

    Hi

    Below solution doesn’t work ..

    Main aim is .. having one form with 5 fields, click on “Button1” should look for all fields mandatory and “Button2” click should validate 3 fields

    function validation(){
    if(buttonFlag == 0){ validationRules = [……] }
    else if(buttonFlag == 1){ validationRules = [……] }
    return validationRules;
    }

    $(‘#orderForm’).jqxValidator({
    rules : validation
    });

    Thanks

    February 17, 2014 at 6:32 am two buttons with one validator #49599

    Peter Stoev
    Keymaster

    Hi mallepaddi,

    To call a function you should write validation(), not only the function’s name.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    February 17, 2014 at 7:42 am two buttons with one validator #49608

    mallepaddi
    Participant

    Hi,

    tried that as well, some how doesn;t work.

    rules : validation()

    Thanks

    February 17, 2014 at 8:17 am two buttons with one validator #49615

    Peter Stoev
    Keymaster

    Hi mallepaddi,

    I suggest you to debug your app with your browser’s Developer tools to see exactly what happens when you click on a button.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    February 18, 2014 at 7:05 am two buttons with one validator #49655

    mallepaddi
    Participant

    HI

    Do you mind to provide sample code of having rules as a function and calling like rules : validation() ?

    Thanks

    February 18, 2014 at 7:10 am two buttons with one validator #49656

    Peter Stoev
    Keymaster

    Hi mallepaddi,

    Unfortunately, we do not have such sample available at present.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.