ASP.NET provides all the wonderful validation controls and perform both client-side and server-side validation. However, to validate a CheckBox, only the Custom Validation Control can be used. Assume you have the following…
<span><asp:CheckBox ID="MyCheckBox" runat="server" onClick="if (this.checked) CheckBoxChecked(); else CheckBoxUnchecked();" />Yes, your website is awesome! =) </span>
<asp:CustomValidator ID="MyCheckBoxValidator" runat="server" ErrorMessage="Custom Validator" ClientValidationFunction="ClientValidateMyCheckBox"
ValidationGroup="MyValidationGroup" OnServerValidate="MyCheckBoxValidator_ServerValidate">Required.</asp:CustomValidator>
Pure server-side validation will work, using the event handler MyCheckBoxValidator_ServerValidate. Here’s how it would look, and then start other methods with a check on Page.IsValid
protected void MyCheckBoxValidator_ServerValidate(object source, ServerValidateEventArgs args)
{
args.IsValid = (MyCheckBox.Checked);
}
On the other hand, it would be more efficient if client-side validation can also be done. The JavaScript function ClientValidateMyCheckBox is used for this purpose…
<script type="text/javascript">
function ClientValidateMyCheckBox(source, args)
{
var cb = $get('<%=MyCheckBox.ClientID%>');
args.IsValid = cb.checked;
}
</script>
This will trigger the client validation and if the CheckBox is unchecked, it will display the custom validator’s warning message. However, when you check the CheckBox now the validation warning message doesn’t disappear. This is because the client-side validation event is not triggerred during the client-side onClick event of the CheckBox. (Just a side-note, RequiredValidator and TextBox does not have this behavior. TextBox is validated as soon as something’s typed in.) To resolve this, a MS client-side JavaScript function needs to be hooked up with the onClick event of the CheckBox, Page_ClientValidate(“<validation group name>”) is the JS function to be used. Also note that for the “check and un-check” event of the CheckBox to work, we need to associate two functions to onClick, as shown below…
function CheckBoxChecked()
{
var cb = $get('<%=MyCheckBox.ClientID%>');
cb.checked = true;
Page_ClientValidate("My_Validation_Group");
}
function CheckBoxUnchecked()
{
var cb = $get('<%=MyCheckBox.ClientID%>');
cb.checked = false;
Page_ClientValidate("My_Validation_Group");
}
Final NOTE, don’t leave the validation group name out because it will then validate everything else on your page. However, do NOT use the same group name as the one you assigned in the Custom Validator also, it just doesn’t work. I can see that it doesn’t work because the ControlToValidate property is not set, so there is no linkage.
So well yeah, this will do it… of course, change accordingly if that’s not the behavior you are looking for…
By Bryan Xu