jQuery UI Widgets Forums Editors CheckBox, RadioButton Validate a field based on the value of another field

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

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

  • 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>


    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/


    jquerygu
    Participant

    Hi Nadezhda

    Is there a checkbox missing from your code?


    jquerygu
    Participant

    Nadezhda

    Your sample isn’t working


    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/

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

You must be logged in to reply to this topic.