Validation for list of checkboxes in each3 different partial views

user_14372894 0
Viewed 58

I have a list of checkboxes in 3 different partial view
i.e, in PartialView-1, I have some CheckBoxes and
in PartialView-2 I have a different list of CheckBoxes and
in PartalView-3 I have a different list of CheckBoxes.

My requirement is to write validation in Javascript in such a way that we need to select at least one checkbox to be select either in any of the 3 PartialViews, if not we need to throw an error message

My PartialView-1:

<div id = "PartialView1">
    <label>PartialView1</label>
    <div id="dias">
        <div id="diast">
            @if (IsUpper)
            {
                <div>
                    <div>
                        <div>
                            <span>Data1</span>
                        </div>
                    </div>

                    @for (var index = 0; index < 4; index++)
                    {
                        var labelNumber = Model.Data[index].Label;
                        if (index == 0)
                        {
                            <div>
                                <div>
                                    <label>@labelNumber</label>
                                </div>
                            </div>
                        }
                        else
                        {
                            <div>
                                <div>
                                    <div>
                                        @Html.CustomCheckBoxFor(m => Model.Data[index].Close, new SelectListItem { Name = Html.NameFor(m => m.Data[index].Close).ToString() }, null, false)
                                    </div>
                                    <label>@labelNumber</label>
                                </div>
                            </div>
                        }

                    }
                    @for (var index = 4; index < 8; index++)
                    {
                        var labelNumber = Model.Data[index].Label;

                        <div>
                            <div>
                                @if (index == 4)
                                {
                                    <div class="ver></div>
                                }
                                <div>
                                    @Html.CheckBoxFor(m => Model.Data[index].Close, new SelectListItem { Name = Html.NameFor(m => m.Data[index].Close).ToString() }, null, false)
                                </div>
                                <label>@labelNumber</label>
                            </div>
                        </div>
                    }
                    <div>
                        <div><span>Lower</span></div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

My PartialView-2:

<div id="PartialView2">
  ***same code as PartialView1***
</dv>

My PartialView-3:

<div id="PartialView3">
  ***same code as PartialView1***
</dv>
asp.net-core model-view-controller asp.net-mvc javascript c#
1 Answers

My requirement is to write validation in Javascript in such a way that we need to select at least one checkbox to be select either in any of the 3 PartialViews

You could use JQuery to get the checked checkbox count from the partial view, then based on the checked checkbox count to show the error message:

code as below:

    <form asp-action="Index">

        <partial name="pv_CheckboxList" model="@ViewData["checkboxlist"]" />
        <partial name="_pvcheckboxlist2" model="@ViewData["checkboxlist"]" />
        <partial name="_pvcheckboxlist3" model="@ViewData["checkboxlist"]" />


        <input type="submit" id="btnsubmit" />

    </form>

    @section Scripts{ 
    <script type="text/javascript">
        $(function () {
            $("#btnsubmit").click(function () {
                var selectedcount = $('#PartialView1').find('input[type=checkbox]:checked').length
                    + $('#PartialView2').find('input[type=checkbox]:checked').length +
                    $('#PartialView3').find('input[type=checkbox]:checked').length;


                if (selectedcount == 0) {
                    event.preventDefault(); //Not select checkbox, prevent the default submit event.
                    alert('Please select at least one checkbox');
                }
            });
        });
    </script>
    }

Or using JavaScript script:

        <input type="submit" id="btnsubmit" onclick="validatecheckbox();" />

    @section Scripts{ 
    <script type="text/javascript">
        function validatecheckbox() {
            var selectedcount = document.getElementById("PartialView1").querySelectorAll('input[type="checkbox"]:checked').length
                + document.getElementById("PartialView2").querySelectorAll('input[type="checkbox"]:checked').length
                + document.getElementById("PartialView3").querySelectorAll('input[type="checkbox"]:checked').length;
            if (selectedcount == 0) {
                event.preventDefault();
                alert('Please select atleast one checkbox');
            }

        }; 
    </script>
    }

The screenshot as below:

enter image description here

user_70622910
Related