jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Validation onError and onSuccess not firing

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Validation onError and onSuccess not firing Posts
  • May 31, 2013 at 7:54 pm Validation onError and onSuccess not firing #22304

    michaelv
    Member

    The onSuccess and onError handlers are not firing when they should be.  The UI element does show up next to my textbox correctly, but neither alerts are showing.  Below is the code I’m using.

    $('#jqxValidator').jqxValidator({
                    rules: [
                        { input: '#name', message: 'Please enter a name for this Use Type', action: 'keyup, blur', rule: 'required' },
                    ],
                    onError: function() {
                        alert('error!');
                    },
                    onSuccess: function() {
                        alert('success!');
                    }
                });
    June 1, 2013 at 7:01 am Validation onError and onSuccess not firing #22328

    Peter Stoev
    Keymaster

    Hi,

    Please, find below a working sample:

    <!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.8.3.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/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme()
                $('#sendButton').on('click', function () {
                    $('#testForm').jqxValidator('validate');
                });
                // initialize validator.
                $('#testForm').jqxValidator({
                    rules: [
                           { input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' }
                    ],
                    onSuccess: function () {
                        alert("validationSuccess");
                    },
                    onError: function () {
                        alert("validationError");
                    }
                });
            });
        </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 colspan="2" style="text-align: center;">
                                <input type="button" value="Send" id="sendButton" /></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.