In this short article I will explain how to validate ASP.Net CheckBoxList using jQuery in ASP.Net.
jQuery ValidationEngine plugin is used to perform validation of ASP.Net CheckBoxList. Validations such at least one (minimum one) checkbox must be checked, at least two (minimum two) checkbox must be checked, etc.
You might also like to read:
ASP.Net CheckBoxList Validation (at least one checked) using jQuery ValidationEngine Plugin
Inside the jQuery document ready event handler, the ValidationEngine plugin is applied to the CheckBoxList and then validate[minCheckbox[1]] CSS class is applied to each CheckBox inside the CheckBoxList.
Note: You will notice the integer value 1 in validate[minCheckbox[1]], this informs jQuery ValidationEngine that it has to perform at least on CheckBox checked validation, If you want the user to check at least 2 checkboxes, the syntax will change as validate[minCheckbox[2]].
The jQuery ValidationEngine Plugin will perform validation only when CheckBoxes belong to same group and hence we will have to set name attribute for all the CheckBoxes with same value.
Finally a click event handler is attached to the Button control, when the button is clicked the CheckBoxList is validated and based on which, it returns true or false.
<link href="ValidationEngine.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
charset="utf-8"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//Attach the validate class to each CheckBox.
$("table[id*=chkFruits1] input").addClass("validate[minCheckbox[1]]");
//Update the name attribute to group the CheckBoxes
$("table[id*=chkFruits1] input").attr("name", "Group_Fruits_1");
$("[id*=Button1]").bind("click", function () {
if (!$("table[id*=chkFruits1]").validationEngine('validate')) {
return false;
}
return true;
});
});
</script>
![Validate ASP.Net CheckBoxList using jQuery ValidationEngine Plugin]()
ASP.Net CheckBoxList Validation (minimum 2 must be checked) using jQuery ValidationEngine Plugin
It is very similar to above implementation, the only difference is that since we want user to select at least two or minimum two checkboxes, I have changed the CSS class to validate[minCheckbox[2]].
<link href="ValidationEngine.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"
charset="utf-8"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/jquery.validationEngine.js"
charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//Attach the validate class to each CheckBox.
$("table[id*=chkFruits2] input").addClass("validate[minCheckbox[2]]");
//Update the name attribute to group the CheckBoxes
$("table[id*=chkFruits2] input").attr("name", "Group_Fruits_2");
$("[id*=Button2]").bind("click", function () {
if (!$("table[id*=chkFruits2]").validationEngine('validate')) {
return false;
}
return true;
});
});
</script>
Please select at least two Fruits?
<br />
<br />
<br />
<asp:CheckBoxList ID="chkFruits2" runat="server">
<asp:ListItem Text="Apple" Value="1" />
<asp:ListItem Text="Mango" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
<asp:ListItem Text="Orange" Value="4" />
<asp:ListItem Text="Watermelon" Value="5" />
<asp:ListItem Text="Guava" Value="6" />
</asp:CheckBoxList>
<asp:Button ID="Button2" Text="Submit" runat="server" />
![Validate ASP.Net CheckBoxList using jQuery ValidationEngine Plugin]()
Demo
Downloads
