Tuesday, March 10, 2009

Validating CheckBoxList Control

ASP.NET provides the validation controls that enables checking if the input is valid before starting to process in on the server and thus save time for the user. These controls are very easy to use. However when I tried to user a required field validator for a CheckboxList control, to make sure that the user selected at least one item, I got an exception, saying that the control to validate is invalid. It turned out that the validation does not work for CheckboxList.
I found the following article about it:
http://aspnet.4guysfromrolla.com/articles/092006-1.aspx
It claims that there are 3 possible solutions: implement the validation not using the validation controls, use custom validation controls and write the validation methods, or create a custom control that does the validation the same way as the validation controls provided by the ASP.NET.
Since the third option is out of my scope for this project, I chose the second option, using the custom validation control.
However, when I created a custom validation control and set the control to validate as my checkbox list, I got the same exception again - a checkbox list cannot be the control to validate, even for a custom validation control.
So I decided to use a dummy control as the control to validate. The problem was that I needed a way to know which control to validate. These checkbox lists are created dynamically at runtime.
This is what I did: I created a dummy textbox and put the ID of the checkboxlist as the value inside the text box. I sent the textbox as the control to validate, and then got the ID of my "real" control to validate from the value that was sent to the validation function, and used it to find my checkbox list and perform the validation checks.
But of course I didn't want the user to see the dummy text box. So I set its "Visibility" to false.
When I did that, the validation method was never called. So it seems like the ASP.NET does not perform validation for a control whose visibility is false.
The solution was to hide it by setting its "display" attribute to "none".
One last problem I had when developing this solution: When I only had the server-side validation method, things didn't work well, I could not see the error message and the operation wasn't stopped. After I added the javascript client-side validation function, everything worked just fine.
Here is the code:

Creating the dummy text box and the custom validation control:

// add dummy text box just for passing to validation function
TextBox txtDummy = new TextBox();
txtDummy.ID = "txt_checkbox_" ID.ToString();
txtDummy.Text = chk.ID.ToString(); // chk is the checkboxlist to validate
txtDummy.Attributes.CssStyle.Add(HtmlTextWriterStyle.Display, "none");
Panel1.Controls.Add(txtDummy);
// add custom validation control
CustomValidator valCheck = new CustomValidator();
valCheck.ControlToValidate = txtDummy.ID;
valCheck.ErrorMessage = "You must select at least one value!";
valCheck.ServerValidate = new ServerValidateEventHandler(ValidateCheckbox);
valCheck.ClientValidationFunction = "CheckVal";
Panel1.Controls.Add(valCheck);

Server side validation method:

void ValidateCheckbox(Object source, ServerValidateEventArgs args)
{
// get the checkbox list
CheckBoxList chk = Panel1.FindControl(args.Value) as CheckBoxList;
// check if at least one option is selected
if (chk.SelectedIndex < 0)
args.IsValid = false;
else
args.IsValid = true;
}

Client side validation method:

function CheckVal(sender, args)
{
var checkID = args.Value;
var checDP = document.getElementById(checkID);

var selectedItemCount = 0;
var liIndex = 0;
var currentListItem = document.getElementById(checDP.id + '_' + liIndex.toString());
while (currentListItem != null)
{
if (currentListItem.checked)
selectedItemCount++;
liIndex++;
currentListItem = document.getElementById(checDP.id + '_' + liIndex.toString());
}

if (selectedItemCount == 0)
{
args.IsValid = false;
return;
}

args.IsValid = true;
}

1 comment:

  1. Hi,

    This is very informative article. Thanks for sharing your knowledge. There are few links that also helpful for developers. This article have described to validate CheckBox, CheckBoxList, DropDownList, FileUpload, RadioButton, RadioButtonList, TextBox using jquery.

    http://mindstick.com/Articles/c3825daa-a449-467d-9513-34a8232d498a/?Validations%20on%20Asp%20Net%20Control

    http://www.aspdotnet-suresh.com/2012/09/jquery-validate-checkboxlist-in-aspnet.html

    ReplyDelete