Validate a field based on the value of another field - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: check, checkbox, custom rule, jqxvalidator, validator

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

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

Author

Validate a field based on the value of another field Posts

February 24, 2015 at 11:34 pm Validate a field based on the value of another field #67598

jquerygu

Participant

Hello

I need to validate a field based on the value of another field.

I have it working on a test form see sample 2 below, BUT I need to get the correct syntax to use with the jqwidgets validator like sample 1 (which doesn’t work):

Sample 1 (doesn’t work when I add it to the validation code)

{ input: “#intCME”, message: “test”, action: ‘keyup, blur’, rule: ‘strCME: {
required: “#intCME:checked”
}’ }

Sample 2 (This form works but I need the correct syntax to use within jqwidgets)

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Makes details required only if #other is checked.</title>
<link rel=”stylesheet” href=”http://jqueryvalidation.org/files/demo/site-demos.css”>
</head>
<body>
<form id=”myform”>
<label for=”other”>Check to make next field required</label>
<input id=”other” type=”checkbox”>
<br>
<input id=”details” name=”details”>
<br>
<input type=”submit” value=”Validate!”>
</form>
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://jqueryvalidation.org/files/dist/jquery.validate.min.js”></script>
<script src=”http://jqueryvalidation.org/files/dist/additional-methods.min.js”></script>
<script>

$( “#myform” ).validate({
rules: {
details: {
required: “#other:checked”
}
}
});
</script>
</body>
</html>

February 25, 2015 at 10:29 am Validate a field based on the value of another field #67638

Nadezhda

Participant

Hello jquerygu,

Here is an example which shows how to validate input field with condition and custom rule. If checkbox is checked and click on the input field this input field will be validated. I hope it would be helpful.

<!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/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/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#submitButton').jqxButton({ width: 60, height: 25 });
            $('#other').jqxCheckBox({ width: 130 });
            $("#details").jqxInput({ height: 25, width: 200 });
            $('#myform').jqxValidator({
                rules: [
                    {
                        input: "#details", message: "Details length should be between 8 and 45 characters(Inclusive).", action: 'keyup, click', rule: function () {
                            var checked = $('#other').jqxCheckBox('checked');
                            if (checked) {
                                var value = $('#details').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>
            <form id="myform">
                <table class="register-table">
                    <tr>
                        <td>
                            <div id="other">Check to make next field required</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="details" name="details">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <input type="submit" value="Validate!" id="submitButton">
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

February 25, 2015 at 3:31 pm Validate a field based on the value of another field #67672

jquerygu

Participant

Hi Nadezhda

Is there a checkbox missing from your code?

February 25, 2015 at 4:18 pm Validate a field based on the value of another field #67677

jquerygu

Participant

Nadezhda

Your sample isn’t working

February 26, 2015 at 7:37 am Validate a field based on the value of another field #67714

Nadezhda

Participant

Hi jquerygu,

In the above example you can find jqxCheckBox initialization on 17th line so checkbox is not missing. If you want to validate input on condition you can achieve it with custom rule. The input field is validated when checkbox is checked and click on the input (it is shown in above example). If you want to validate input with custum rule and validate the form by click on button, please, find the following example.

<!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/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/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#clickButton').jqxButton({ width: 60, height: 25 });
            $("#clickButton").click(function () {
                $('#myform').jqxValidator('validate');
            });
            $('#other').jqxCheckBox({ width: 130 });
            $("#details").jqxInput({ height: 25, width: 200 });
            $('#myform').jqxValidator({
                rules: [
                    {
                        input: "#details", message: "Details length should be between 8 and 45 characters(Inclusive).", action: 'keyup, click', rule: function () {
                            var checked = $('#other').jqxCheckBox('checked');
                            if (checked) {
                                var value = $('#details').jqxInput('val');
                                var numValue = value.length
                                if (numValue >= 8 && numValue <= 45) {
                                    return true;
                                }
                                else return false;
                            };
                        }
                    },
                    {
                        input: '#details', message: 'This field is required!', action: 'blur', rule: 'required'
                    },
                    {
                        input: '#other', message: 'This checkbox is required!', action: 'change', rule: 'required', position: 'right:0,0'
                    }
                ]
            });

        });
    </script>
</head>
<body class='default'>
    <div id="register">
        <div>
            <form id="myform">
                <table class="register-table">
                    <tr>
                        <td>
                            <div id="other">Check to make next field required</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="details" name="details">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <input type="button" value="click" id="clickButton">
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.