Checkboxlist - validation - client side javascript

G

Guest

Hello!

I need client side script to verify that at least one checkbox is checked in
a checkboxlist. Any suggestions?
 
Joined
Nov 13, 2006
Messages
1
Reaction score
0
hello

I need client side script to verify that at least one checkbox is checked in
a checkboxlist. Any suggestions?

--
------------------------------------------------------------------------------------------------------------------------------------------------------
 
Joined
Oct 28, 2011
Messages
1
Reaction score
0
Validate Checkbox List using client side java-script

Hi

You can use simple javascript to validate a check box list follows:

I have written two javascript functions for this:-

1) ValidateEducations() : This function finds the checkboxlist control in the client side and iterates through all the listitems of the checkboxlist. It takes up every listitem (which is actually a checkbox) one by one and finds whether it is checked or not. The moment it finds a checked checkbox it returns true indicating that the checkboxlist is validated. If none of the listitems(child checkboxes) are found checked and the for loop (enumerating through the listitems) ends, it returns false indicates that checkboxlist validation failed.

2) ShowHidevalidationError(): This function just does the job of showing/hiding validation error.

/******************************/
<script type="text/javascript" language="javascript">
function ValidateEducations() {
var chkEducations = document.getElementById('<%= chkEducations.ClientID %>');
if(chkEducations) {
var chkEducationsItemList = chkEducations.getElementsByTagName('input');
if(chkEducationsItemList) {
if(chkEducationsItemList.length > 0) {
for(var i = 0 ; i < chkEducationsItemList.length; i++) {
var chkEducationsItem = chkEducationsItemList;
if(chkEducationsItem) {
if(chkEducationsItem.type == 'checkbox') {
if(chkEducationsItem.checked) {
return ShowHideValidationError(false);
}
}
}
}
}
}
}
return ShowHideValidationError(true);
}

function ShowHideValidationError(show) {
var lblEducationsValidationError = document.getElementById('<%= lblEducationsValidationError.ClientID %>');
if(lblEducationsValidationError) {
if(show) {
lblEducationsValidationError.style.display = 'block';
return false;
} else {
lblEducationsValidationError.style.display = 'none';
return true;
}
}
}
</script>
/******************************/



And here goes the related HTML markup:
/**********************************************************/
<table>
<tr>
<td>
<div>
<asp:Label ID="lblEducation" runat="server" Text="Education" />
</div>
<div>
<asp:Label ID="lblHint" runat="server" Text="(Please select all qualificatins you have acquired)"
Font-Size="8" ForeColor="GrayText" />
</div>
</td>
<td>
<asp:CheckBoxList ID="chkEducations" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow"
TextAlign="Right" onclick="ValidateEducations()">
<asp:ListItem Text="Primary School" Value="1" />
<asp:ListItem Text="High School" Value="2" />
<asp:ListItem Text="Junior College" Value="3" />
<asp:ListItem Text="Graduate" Value="4" />
<asp:ListItem Text="Post Graduate" Value="5" />
<asp:ListItem Text="Phd" Value="6" />
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblEducationsValidationError" runat="server" Font-Bold="true" ForeColor="Red"
Text="Please select at least one educational qualification." Style="display:none" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnSubmitForm" runat="server" Text="Submit" OnClientClick="return ValidateEducations()"
OnClick="btnSubmitForm_Clicked" />
</td>
</tr>
</table>
/**********************************************************/



Description:
The checkbox list control renders as an HTML table if the RepeatLayout property is set as "table" and renders as HTML <span> if the RepeatLayout property is set as ""Flow".
In both he cases the client side javascript event onclick works. Hence the moment you check/uncheck a checkbox the validation functions will be called and the checkboxlist will be validated on the client side itself.

How do we validate?

Whether the checkboxlist renders into <span> or <table> it is definitely going to contain a collection of child HTML elements i.e. <input> tags with their type set to "checkbox" each.

This collection is retrieved by calling the method getElementsByTagName('input') on the instance of the checkboxlist control.

We then iterate through all the elements in this collection and for each element (checkbox) we assess the checked status. If checkbox is checked we return immediately because validation has succeeded. If we are, however, done iterating through all the elements (checkboxes) and still found none as checked then we display the validation failed message.


Thank you
Ankur
 

Attachments

  • sample.zip
    1.7 KB · Views: 186

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top