CheckBox Validation

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…

About these ads

3 Responses to “CheckBox Validation”

  1. ASP.NET Validation « Wiki ASP.NET Says:

    [...] Comments (RSS) « CheckBox Validation [...]

  2. Axel Foley Says:

    Hi,

    I am curious on how to add the “Click” event programmatically to the checkbox control. Could you give me advise on how this works?
    It seems this is the only barrier I have using this solution.
    Thanks in advance.

    Axel

  3. Praveen Says:

    Thanks a lot! This article was extremely helpful.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: