jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › Validation with a Ok button

Tagged: , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Validation with a Ok button Posts
  • May 23, 2014 at 8:22 am Validation with a Ok button #54825

    nico
    Participant

    I’m trying to create a form that has to do exactly this:
    – When I’m typing, validation is checked –> ok I may do it with a function in rule
    – When I’m typing, if my function finds an error, launch a tooltip –> ok I may do it with function returning false
    – When I’m typing and it is not an error, but the input is not correct, error is not launched but validation of the page is still false –> How may I do this?
    Example: a rule with length 3,50 and action on keyup –> if I begin to write, first letter gives me an error. Only when I get out of this input, error may be launched if input is an error. In rule function I may return only true or false, and if I return true in order to hide error, page validation is incoherent!

    RULE 3,50 ACTION ON KEYUP
INPUT TEXT  1     12      123    12+focusout
ERROR       NO    NO      NO     YES
INCORRECT   YES   YES     NO     YES
VALIDE      NO    NO      YES    NO
OKBUTTON    DIS.  DIS.    ENAB.  DIS.

    – There is a call that gives me state of page without launch all errors?
    Example: I have an OK button that requires a disable option if every input is incorrect or in error state. Every time a character is written, I don’t want to see an error on each input because they are empty and user didn’t have time to compile them, only to verify if ok button is disabled or not.
    I need something like
    $(“#form”).jqxValidator(‘validate-no-errors’)

    My form may change completely many times, because it is created at runtime. So I can’t do a function that check everything. I need a validation system that can understand a third state: “incorrect”, that gives validation state false but it is not still an error launch.
    Is it possible with your framework?

    Thank you

    N

    May 26, 2014 at 7:04 am Validation with a Ok button #54895

    Dimitar
    Participant

    Hello N,

    Here is an example (note the customInput field):

    <!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" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#testForm').jqxValidator({ rules: [
                { input: "#customInput", message: "Input must be between 3 and 50 characters!", action: "blur", rule: function (input, commit) {
                    if (input.val().length < 3 || input.val().length > 50) {
                        $("#OKButton").jqxButton({ disabled: true });
                        return false;
                    }
                    $("#OKButton").jqxButton({ disabled: false });
                    return true;
                }
                },
                { input: "#customInput", message: "Input must be between 3 and 50 characters!", action: "keyup", rule: function (input, commit) {
                    if (input.val().length < 3 || input.val().length > 50) {
                        $("#OKButton").jqxButton({ disabled: true });
                    } else {
                        $("#OKButton").jqxButton({ disabled: false });
                    }
                    return true;
                }
                },
                { 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'
            });
            $("#OKButton").jqxButton();
        });
    </script>
</head>
<body>
    <form id="testForm" action="./">
    <table class="register-table">
        <tr>
            <td>
                Custom:
            </td>
            <td>
                <input type="text" id="customInput" class="text-input" />
            </td>
        </tr>
        <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>
    <button id="OKButton">
        OK</button>
</body>
</html>

    Best Regards,
    Dimitar

    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.