IF condition in validation - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: if, Input, jqxvalidator, multiple, validate, validator

This topic contains 7 replies, has 2 voices, and was last updated by sathiyaseelan8 10 years, 5 months ago.

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

Author

IF condition in validation Posts

April 10, 2014 at 10:10 am IF condition in validation #52857

sathiyaseelan8

Participant

hi.

i have a situation where there are four text fields, at least one of this four text field must be filled up.

how am i to validate this using jqxValidator?

thanks in advance

April 11, 2014 at 10:24 am IF condition in validation #52937

Dimitar

Participant

Hello sathiyaseelan8,

Here is an example, using custom rules:

<!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/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var input1Rule = function () {
                var valid = $("#input1").val().length > 0 || $("#input2").val().length > 0 || $("#input3").val().length > 0 || $("#input4").val().length > 0;
                return valid;
            };

            var radiobuttonRule234 = function () {
                var valid = $("#input1").val().length > 0 || $("#input2").val().length > 0 || $("#input3").val().length > 0 || $("#input4").val().length > 0;
                if (valid == false) {
                    $('#form').jqxValidator('validateInput', '#input1');
                } else {
                    $('#form').jqxValidator('hideHint', '#input1');
                    $('#form').jqxValidator('hideHint', '#input2');
                    $('#form').jqxValidator('hideHint', '#input3');
                    $('#form').jqxValidator('hideHint', '#input4');
                }

                return true;
            };

            $('#form').jqxValidator({
                rules: [{ input: '#input1', message: 'Enter value in one of the fields', action: 'keyup, blur', rule: input1Rule, position: 'right:0,0' }, { input: '#input2', message: 'Enter value in one of the fields', action: 'keyup, blur', rule: radiobuttonRule234, position: 'right:0,0' }, { input: '#input3', message: 'Enter value in one of the fields', action: 'keyup, blur', rule: radiobuttonRule234, position: 'right:0,0' }, { input: '#input4', message: 'Enter value in one of the fields', action: 'keyup, blur', rule: radiobuttonRule234, position: 'right:0,0'}]
            });
            $("#validate").click(function () {
                var form = $("#form");
                $('#form').jqxValidator('validate', form);
            });
        });
    </script>
</head>
<body class='default'>
    <form id="form">
    <input type="text" id="input1" /><br />
    <input type="text" id="input2" /><br />
    <input type="text" id="input3" /><br />
    <input type="text" id="input4" />
    </form>
    <button id="validate">
        Validate</button>
</body>
</html>

Best Regards,
Dimitar

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

April 13, 2014 at 5:06 am IF condition in validation #52985

sathiyaseelan8

Participant

thank dimitar.. 🙂

May 15, 2014 at 4:23 am IF condition in validation #54470

sathiyaseelan8

Participant

i have a prob here. i have four fields:

agreement no:<input> agreement date:<input>
purchase order no:<input> purchase order date:<input>

now i have problem to validate this fields.

user must insert either agreement no or purchase order no.(optional) if any of this field is filled, the date also must be filled in.

for example if user insert agreement no, the agreement data also must be insert.

can anyone help me on how to do this validation.. thank you

May 15, 2014 at 9:46 am IF condition in validation #54489

Dimitar

Participant

Hi sathiyaseelan8,

Here is the solution:

<!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/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var dateRule = function (input) {
                var id = input[0].id;
                if (id == "input2") {
                    return !($("#input1").val().length > 0 && input.val().length == 0);
                } else if (id == "input4") {
                    return !($("#input3").val().length > 0 && input.val().length == 0);
                    var valid = 5;
                };
            };

            $('#form').jqxValidator({
                rules: [
                    { input: '#input2', message: 'Enter agreement date.', action: 'keyup, blur', rule: dateRule, position: 'right:0,0' },
                    { input: '#input4', message: 'Enter order date', action: 'keyup, blur', rule: dateRule, position: 'right:0,0' }
                ]
            });
            $("#validate").click(function () {
                var form = $("#form");
                $('#form').jqxValidator('validate', form);
            });
        });
    </script>
</head>
<body class='default'>
    <form id="form">
    agreement no:<input type="text" id="input1" /><br />
    agreement date:<input type="text" id="input2" /><br />
    order no:<input type="text" id="input3" /><br />
    order date:<input type="text" id="input4" />
    </form>
    <button id="validate">
        Validate</button>
</body>
</html>

Best Regards,
Dimitar

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

May 16, 2014 at 4:15 am IF condition in validation #54532

sathiyaseelan8

Participant

hi dimitar

why you use this “!” in here

return !($(“#input1”).val().length > 0 && input.val().length == 0);

what the purpose of using it?

May 16, 2014 at 4:59 am IF condition in validation #54533

Dimitar

Participant

Hi sathiyaseelan8,

This means the result will be true when the condition in parentheses is false. “!” (“not”) is a logical operator which reverses the truthfulness of the statement after it.

Best Regards,
Dimitar

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

May 16, 2014 at 6:06 am IF condition in validation #54540

sathiyaseelan8

Participant

understood. thank you dimitar

Author

Posts

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

You must be logged in to reply to this topic.