jQWidgets Forums

jQuery UI Widgets Forums Plugins Validator, Drag & Drop, Sortable Validation on Condition

This topic contains 3 replies, has 3 voices, and was last updated by  Nadezhda 10 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Validation on Condition #64246

    Vinay Reddy
    Participant

    HI i need to do validation for a text field depending on a condition. How is this possible in JQXValidator.

    For e.g. If a check box is checked then only validation should be done for a text field.

    $(‘#smtptab’).jqxValidator({
    rules : [
    {
    input : ‘#smtp-server’,
    message : ‘Server Name is required.’,
    action:’keyup, click, change, blur, focus’,
    rule:’required’
    },
    {
    input: ‘#smtp-user’,
    message: ‘User Name length should be between 8 and 45 characters(Inclusive).’,
    action: ‘keyup, click, change, blur, focus’,
    rule: ‘length=8,45’
    },
    });

    Here i need to do validation depending on a check box status, how should i do.

    Validation on Condition #64295

    Nadezhda
    Participant

    Hello yennamvinay,

    Here is an example which shows how to validate input field with condition. When checkbox is checked the input field will be validated and when ‘action’ is set to ‘keyup, blur’ this field will be automatically validate on keyup and blur.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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>
        <style type="text/css">
            #smtp-user {
                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>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#smtp-user").jqxInput({ height: 25, width: 200 });
                $('#acceptInput').jqxCheckBox({ width: 130 });
                $('#testForm').jqxValidator({
                    rules: [
                        {
                            input: '#smtp-user', action: 'keyup, blur', message: 'User Name length should be between 8 and 45 characters(Inclusive).',
                            rule: function () {
                                if ($("#acceptInput").val() == true) {
                                    var value = $('#smtp-user').jqxInput('val');
                                    var numValue = value.length
                                    if (numValue >= 8 && numValue <= 45) {
                                        return true;
                                    } else return false;
                                };
                            }
                        }]
                });
            });
        </script>
    </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="smtp-user" class="text-input" /></td>
                        </tr>
                        <tr>
                            <td>
                                <div id="acceptInput" style="margin-left: 50px;" checked="checked">I accept terms</div>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Validation on Condition #64600

    pavan_Jq
    Participant

    Hello All ,

    i want to restrict special characters in Textbox ,pls help me any one

    Validation on Condition #64614

    Nadezhda
    Participant

    Hello pavan_Jq,

    Here is an example which shows how to restrict special symbols in input field.

    <!DOCTYPE html>
    <html lang="en">
    <head>    
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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 () {
                $("#userInput").jqxInput({ height: 25, width: 200 });
                $('#sendButton').on('click', function () {
                    $('#testForm').jqxValidator('validate');
                });
                $('#testForm').jqxValidator({
                    rules: [
                        {
                            input: '#userInput', action: 'keyup, blur', message: 'Specials symbols are not allowed!',
                            rule: function () {
                                var value = $('#userInput').jqxInput('val');
                                var pattern = /^[A-Za-z0-9'.-]+$/;
                                if (!pattern.test(value) && value != "") {
                                    return false;
                                }
                            }
                        }]
                });
            });
        </script>
    </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,
    Nadezhda

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.