jQWidgets Forums

Tagged: checkbox, jqxvalidator, Valdition on Condition, validator

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 Posts

December 16, 2014 at 9:33 am 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.

December 17, 2014 at 7:39 am 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/

December 23, 2014 at 10:19 am Validation on Condition #64600

pavan_Jq

Participant

Hello All ,

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

December 23, 2014 at 1:43 pm 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/

Author

Posts

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

You must be logged in to reply to this topic.