Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm trying to validate one of the checkboxes is checked before going to the next/previous page, but it doesn't look like my check is hit. This website was originally done by someone else and I don't work on websites very often.

I have a set of forms that are filled out, and this is part of my second tab:

The first checkbox is as follows in RegistrationStep2.cshtml:

..
<tbody>
            <tr>

                <td>
                    <div class="col-md-12">
                        <div class="col-md-16">
                            <div>

                                @Html.EditorFor(model => model.PrivilegesS, new { htmlAttributes = new { @class = "RoleChk2" } })
                                <label for="PrivilegesS">(S)</label>

                            </div>
                        </div>

                    </div>
                </td>
       </tr>
  </tbody>
</table> 


After the table are the Next/Previous buttons:

<footer class="col-xs-12 form-group text-right">

        @(Html.Kendo().Button()
                          .Name("Previous1")
                          .Content("Previous")
                          .Events(ev => ev.Click("onPreviousClick")))

        @(Html.Kendo().Button()
                          .Name("Next4")
                          .Content("Next")
                          .HtmlAttributes(new { @class = "k-primary" })
                          .Events(ev => ev.Click("onNextClick")))
</footer>


I tried adding a script to see if any of the checkboxes are set in the model, but I never see an alert and it lets me go to the next screen, which is not good:

<script>
    @*This is my script for my checkboxes..the following does not get hit when run code*@
    $('input.Previous1'.on('click',
    function () {
        if (!model.PrivilegesS && !model.PrivilegesAJ && !model.PrivilegesT && !model.PrivilegesH && !model.PrivilegesE && !model.PrivilegesM && !model.PrivilegesFF) {
            alert('At least one facility privilege must be selected');
            return false;
        }
    }));

    $('input.Next4'.on('click',
    function () {
        if (!model.PrivilegesS && !model.PrivilegesAJ && !model.PrivilegesT && !model.PrivilegesH && !model.PrivilegesE && !model.PrivilegesM && !model.PrivilegesFF)  {
            alert('At least one Facility privilege must be selected');
            return false;
        }
    }));
</script>


I have ApplicantCapturedData.cs:

..

//[Required(ErrorMessage = "Input is required.")]
        public bool PrivilegesS { get; set; }

        public bool PrivilegesH { get; set; }

        public bool PrivilegesFF { get; set; }

..has the list of checkbox variables here..


I also tried attaching it to an event in the button click like https://demos.telerik.com/aspnet-mvc/button/events, but it already has an event on button click to next/previous.

****Updates****
* My script needs to run when the next/previous button is clicked, which is not a change event. If no checkboxes are checked, it's not going to trigger a change event to run the script. There are a bunch of Privilege checkboxes. At least one needs to be checked, but all of them (there's about 10 checkboxes, not all are shown) could be checked. I need to verify at least one is checked when the next/previous button is clicked. How do I do this?

* I'm removing the change scripts that aren't for my checkboxes, because if no checkboxes are checked, there is no change event. I just left them in because it was nearby in the code, and I thought maybe someone would have a suggestion that was similar that I hadn't thought of.

* Radial buttons wouldn't work here because there could be more than one Privilege selected. It's not a yes/no/maybe thing. These are buildings, and they could be in all of them at one point.

What I have tried:

The script shown to validate but it doesn't get hit, and also looked into button click event, but it already has a button click event.

I also added RoleChk2 class, but if no checkboxes are checked there's no click event to watch for that it gets checked.

I considered adding a variable to set if anything gets checked but I'm not that familiar with MVC so I'm not sure where to put it. Plus I'm not sure where to check if it's set if they hit next/previous.

I tried making just one checkbox required instead of the whole group like it should be with RoleChk2, and Required in my ApplicantCapturedData.cs, but never got a Required message when I added the (un)commented [Required part in ApplicantCapturedData.cs. This had worked with other form blank/strings to fill that I don't show.

@Html.EditorFor(model => model.PrivilegesS, new { htmlAttributes = new { @class = "RoleChk2", required="required" } })
Posted
Updated 13-Feb-19 7:34am
v2
Comments
Richard Deeming 12-Feb-19 10:24am    
@*the first few are older...they only let one of a set of different checkboxes be checked at a time*@
$('input.RoleChk').on('change', function () {
    $('input.RoleChk').not(this).prop('checked', false);
});


Is there a reason you're using checkboxes, which need a script for this behaviour, rather than radiobuttons, which don't?

HTML <input type="radio"> | w3schools.com[^]
ShellCl 13-Feb-19 13:02pm    
@richardDeeming - This is older code that was added without the requirement of checking that at least on of the Privilege checkboxes is checked when Next/Previous is clicked. The multi-page form has blanks to fill and checkboxes, with no radiobuttons. I didn't think multiple radiobuttons could be clicked at once, or had a way to validate at least one was clicked. Are you confusing my check for click of next/previous and then validation of at least one checkbox checked with the change check of the other scripts?
ShellCl 13-Feb-19 13:05pm    
@richardDeeming - I looked, and yes, radio buttons only allow one to be clicked at once. I have a case where I can have multiple checkboxes checked at once. It should be at least one, but can have up to 10 checked at once. I need to verify at least one is checked when they click the next/previous button.
Richard Deeming 14-Feb-19 10:30am    
So use radio buttons for the lists where you can only select one option, and checkboxes for the lists where you can select more than one. :)

1 solution

The other code is hooking up "change"; you're hooking up "click".

Based on your description, I don't see why.
 
Share this answer
 
Comments
ShellCl 11-Feb-19 13:53pm    
It's a different function. I need to keep from going to the next page (next/prev button) if they don't check at least one of the checkboxes in my set. In the other set, if one is checked, the others are unchecked. Do you understand? I have left out the code that goes with the change scripts.
ShellCl 11-Feb-19 14:47pm    
If you have a suggestion I'd appreciate it!
ShellCl 11-Feb-19 14:59pm    
It seems like this https://stackoverflow.com/questions/7310590/required-data-annotation-not-working-on-a-group-of-checkboxes, but I'm not sure where the custom validation class, AtLeastOneRegionMustBeCheckedAttribute, goes in MVC.
ShellCl 13-Feb-19 12:58pm    
@gerrySchmitz - I don't need the script to run on change for the Privilege variables. The script needs to run when the next/previous button is clicked, which is not a change event. If no checkboxes are checked, it's not going to trigger a change event to run the script. What do you suggest I do if it's not a change event. I'm not saying the scripts that hook up change are what I should do. Apparently it's confusing the issue. If I could take them out of the script I posted, I would.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900