locked
How to perform conditional client side validation by jquery validate plugin RRS feed

  • Question

  • User264732274 posted

    here i am giving my html. i have a dropdown which showing few product info and showing hobbies by checkbox. i want if user select product iPod then validation will not fire for hobbies checkboxes other wise fire. how to perform this kind of conditional validation by jquery validate plugin adding jquery rules.

    <form name="TestVal" method="post" action="/" novalidate="novalidate">
        <div class="form-horizontal">
            <h4>DateValTest</h4>
            <hr>
    
            <div class="form-group">
                <label style="padding-top: 0px;" for="Products" class="control-label col-md-2">Products</label>
                <div class="col-md-10">
                    <select name="SelectedProductId" id="SelectedProductId" data-val-required="Select any Product" data-val-number="The field SelectedProductId must be a number." data-val="true">
                        <option value="">-- Select Product--</option>
                        <option value="1">IPhone</option>
                        <option value="2">MacBook Pro</option>
                        <option value="3">iPod</option>
                    </select>
                    <span data-valmsg-replace="true" data-valmsg-for="SelectedProductId" class="field-validation-valid text-danger"></span>
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10 input-validation-error">
                    <b>Hobbies</b><br>
                    <input type="checkbox" value="true" name="Hobbies[0].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[0].IsSelected">
                    &nbsp;
                    <label for="Hobbies_0__IsSelected">Reading</label>
                    &nbsp;
                    <input type="hidden" value="Reading" name="Hobbies[0].Name" id="Hobbies_0__Name"><input type="checkbox" value="true" name="Hobbies[1].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[1].IsSelected">
                    &nbsp;
                    <label for="Hobbies_1__IsSelected">Sports</label>
                    &nbsp;
                    <input type="hidden" value="Sports" name="Hobbies[1].Name" id="Hobbies_1__Name"><input type="checkbox" value="true" name="Hobbies[2].IsSelected" id="Hobbies" data-val-required="The IsSelected field is required." data-val="true" class="hobbycls"><input type="hidden" value="false" name="Hobbies[2].IsSelected">
                    &nbsp;
                    <label for="Hobbies_2__IsSelected">Movies</label>
                    &nbsp;
                    <input type="hidden" value="Movies" name="Hobbies[2].Name" id="Hobbies_2__Name">
                </div>
    
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" class="btn btn-default" value="Submit">
                </div>
            </div>
        </div>
    </form>

    Right now i am doing client side validation by this way

    <script type="text/javascript">
        var declarationsError = $('#Hobbies-error');
        $('form').submit(function () {
            if ($("#SelectedProductId option:selected").text() != 'iPod') {
                if ($(".hobbycls:checkbox:checked").length <= 0) {
                    declarationsError.empty();
                    declarationsError.append("<span>Select Any Hobbie's checkbox</span>");
                    declarationsError.show();
                    return false;
                } else {
                    declarationsError.empty();
                    declarationsError.hide();
                }
            }
    
            declarationsError.hide();
            return true;
        });
    
        $('.hobbycls').change(function () {
            if ($(this).is(':checked')) {
                declarationsError.empty();
                declarationsError.hide(); // hide error message
            }
        });
    </script>

    the above script is working fine but i want to do the same using jquery validate plugin adding rules.

    so please guide me what jquery validate code i need to write to perform the same. show me how to do this kind of conditional validation by adding jquery rules. thanks

    Wednesday, March 30, 2016 8:00 PM

Answers

  • User61956409 posted

    Hi sudip_inn,

    It seems that you’d like to let user choose at least one checkbox, please refer to the following sample.

    <style>
        #Hobbies-error {
            color: red;
        }
    </style>
    <script>
        $.validator.addMethod('onecheck', function (value, ele) {
            return $("input:checked").length >= 1;
        }, "Select Any Hobbie's checkbox")
    
        $(document).ready(function () {
            $("#form1").validate({
                rules: {
                    Hobbies: {
                        onecheck: true
                    }
                },
                errorPlacement: function (error, element) {
                    error.appendTo('#Hobbies-error');
                }
            });
        });
    </script>
    
    <div>
        <input type="checkbox" name="Hobbies" value="Reading" class="hobbycls" />Reading<br />
        <input type="checkbox" name="Hobbies" value="Sports" class="hobbycls" />Sports<br />
        <input type="checkbox" name="Hobbies" value="Movies" class="hobbycls" />Movies<br />
        <div id="Hobbies-error"></div>
        <input type="submit" class="btn btn-default" value="Submit" />
    </div>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 31, 2016 3:25 AM
  • User61956409 posted

    Hi sudip_inn,

    If you test the code, you will find that the function onecheck will fire when you submit the form and you check/uncheck the checkbox group. If you switch onecheck: true to onecheck: false, function onecheck will not affect the form fields validation.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 7, 2016 9:51 AM

All replies

  • User61956409 posted

    Hi sudip_inn,

    It seems that you’d like to let user choose at least one checkbox, please refer to the following sample.

    <style>
        #Hobbies-error {
            color: red;
        }
    </style>
    <script>
        $.validator.addMethod('onecheck', function (value, ele) {
            return $("input:checked").length >= 1;
        }, "Select Any Hobbie's checkbox")
    
        $(document).ready(function () {
            $("#form1").validate({
                rules: {
                    Hobbies: {
                        onecheck: true
                    }
                },
                errorPlacement: function (error, element) {
                    error.appendTo('#Hobbies-error');
                }
            });
        });
    </script>
    
    <div>
        <input type="checkbox" name="Hobbies" value="Reading" class="hobbycls" />Reading<br />
        <input type="checkbox" name="Hobbies" value="Sports" class="hobbycls" />Sports<br />
        <input type="checkbox" name="Hobbies" value="Movies" class="hobbycls" />Movies<br />
        <div id="Hobbies-error"></div>
        <input type="submit" class="btn btn-default" value="Submit" />
    </div>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 31, 2016 3:25 AM
  • User264732274 posted

    @Fei you change my html. u gave a fixed name to all my checkboxes but in my side that i can not do.

    1) my checkboxes has class name so can't we set rule using class name like below code?

    rules: {
                    hobbycls : {
                        onecheck: true
                    }
                }

    2) what does mean onecheck : true ?

    3) i could understand onecheck is function name but why we need to pass true there?

    4) when onecheck function will fire? when form submit or when user select or deselect checkbox ?

    please answer my points. thanks

    Thursday, March 31, 2016 8:16 AM
  • User61956409 posted

    Hi sudip_inn,

    If you test the code, you will find that the function onecheck will fire when you submit the form and you check/uncheck the checkbox group. If you switch onecheck: true to onecheck: false, function onecheck will not affect the form fields validation.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 7, 2016 9:51 AM
  • User264732274 posted

    @Fei this portion of your code is not clear.

    $.validator.addMethod('onecheck', function (value, ele) {
            return $("input:checked").length >= 1;
        }, "Select Any Hobbie's checkbox")
    
        $(document).ready(function () {
            $("#form1").validate({
                rules: {
                    Hobbies: {
                        onecheck: true
                    }
                },
                errorPlacement: function (error, element) {
                    error.appendTo('#Hobbies-error');
                }
            });
        });

    what the below rule is trying to say ?

    rules: {
                    Hobbies: {
                        onecheck: true
                    }
                }

    what does means onecheck is true or false ?

    when the function onecheck will be called ?

    please guide me.

    thanks

    Thursday, April 7, 2016 11:48 AM
  • User264732274 posted

    @Fei you said "you switch onecheck: true to onecheck: false, function onecheck will not affect the form fields validation."

    if i set onecheck: false then why onecheck will not fire when form will be submitted.......can you discuss the reason. thanks

    Thursday, April 7, 2016 11:50 AM