I've got a CheckBoxList control that I want to require the user to check at least ONE box, it does not matter if they check every single one, or 3, or even just one.
In the spirit of asp.net's validation controls, what can I use to enforce this? I'm also using the Ajax validation extender, so it would be nice if it could look like other controls, and not some cheesy server validate method in the codebehind.
<asp:CheckBoxList RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="3" ID="ckBoxListReasons" runat="server"> <asp:ListItem Text="Preliminary Construction" Value="prelim_construction" /> <asp:ListItem Text="Final Construction" Value="final_construction" /> <asp:ListItem Text="Construction Alteration" Value="construction_alteration" /> <asp:ListItem Text="Remodel" Value="remodel" /> <asp:ListItem Text="Color" Value="color" /> <asp:ListItem Text="Brick" Value="brick" /> <asp:ListItem Text="Exterior Lighting" Value="exterior_lighting" /> <asp:ListItem Text="Deck/Patio/Flatwork" Value="deck_patio_flatwork" /> <asp:ListItem Text="Fence/Screening" Value="fence_screening" /> <asp:ListItem Text="Landscape - Front" Value="landscape_front" /> <asp:ListItem Text="Landscape - Side/Rear" Value="landscape_side_rear" /> <asp:ListItem Text="Other" Value="other" /> </asp:CheckBoxList>
Checking if a checkbox is checked First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.
$('#frmTest'). submit(function(){ if(! $('#frmTest input[type="checkbox"]').is(':checked')){ alert("Please check at least one."); return false; } }); is(':checked') will return true if at least one or more of the checkboxes are checked.
The HTML Markup consists of an ASP.Net TextBox, a CheckBox to enable or disable the validation when it is checked or unchecked respectively and a Button to trigger the RequiredField Validator for the TextBox.
It's easy to do this validation server side, but I am assuming you want to do it client side?
JQuery can do this very easily as long as you have something that all checkbox controls have in common to use as a selector such as class (CssClass on your .NET control). You can make a simple JQuery function and connect it to a ASP.NET custom validator. Remember if you do go the custom validator route to make sure you check it server side as well in case javascript is not working, you don't get a free server side check like the other .NET validators.
For more information on custom validators check out the following links: www.asp.net and MSDN
You don't need to use JQuery, it just makes the javascript function to iterate and look at all your checkbox controls much easier but you can just use vanilla javascript if you like.
Here is an example I found at: Link to original
<asp:CheckBoxList ID="chkModuleList"runat="server" > </asp:CheckBoxList> <asp:CustomValidator runat="server" ID="cvmodulelist" ClientValidationFunction="ValidateModuleList" ErrorMessage="Please Select Atleast one Module" ></asp:CustomValidator> // javascript to add to your aspx page function ValidateModuleList(source, args) { var chkListModules= document.getElementById ('<%= chkModuleList.ClientID %>'); var chkListinputs = chkListModules.getElementsByTagName("input"); for (var i=0;i<chkListinputs .length;i++) { if (chkListinputs [i].checked) { args.IsValid = true; return; } } args.IsValid = false; }
Side Note: JQuery is just a little js file include you need to add to your page. Once you have it included you can use all the JQuery you like. Nothing to install and it will be full supported in the next version of Visual Studio I think.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With