Disabling the Submit Button Until a CheckBox is CheckedBy Scott Mitchell
ASP.NET provides a variety of validation Web controls that can be used to validate a user's form field inputs. Unfortunately, the validation Web controls do not work with the CheckBox or CheckBoxList Web controls. In a previous article, Creating Validator Controls for the CheckBox and CheckBoxList, I shared two custom controls I had created to address this shortcoming: CheckBoxValidator and CheckBoxListValidator. These controls work like any other ASP.NET validation control - at a minimum, just add them to a page and specify their
A colleague recently asked me to enhance the CheckBoxValidator control's client-side script so that it could optionally disable a particular
button when invalid. In particular, she wanted to be able to specify the
ID of a Button control in the CheckBoxValidator's properties.
The CheckBoxValidator would then use client script to disable (gray out) the Button when the CheckBoxValidator was invalid. The following screen shot
illustrates this concept. On the left, the CheckBox is unchecked so the Submit button is grayed out; on the right, the CheckBox has been checked so
the Button has become enabled.
I recently updated the CheckBoxValidator to meet these specifications. Read on to learn more about this new enhancement to the CheckBoxValidator!
|Before You Read This Article...|
|The CheckBoxValidator is a custom validation control I created and shared in the Creating Validator Controls for the CheckBox and CheckBoxList article. Since this article builds on the code discussed in Creating Validator Controls for the CheckBox and CheckBoxList, I encourage you read the previous article before starting on this one.|
A Quick Overview of the CheckBoxValidator Control
Before we look at the new features of the CheckBoxValidator, let's take a moment to quickly review the core CheckBoxValidator functionality. The CheckBoxValidator was designed to ensure that a CheckBox is either checked or unchecked. To use the control, you simply add it to a page and type in the
IDof the CheckBox to validate into its
ControlToValidateproperty. The CheckBoxValidator injects client-side script into the page to perform client-side validation in addition to its server-side validation.
By default, the CheckBoxValidator will only report that the data is valid if its CheckBox is checked. If you want to CheckBoxValidator to
report valid data if its CheckBox is unchecked, then set the validator control's
MustBeChecked property to False.
That's all there is to it! Using the CheckBoxValidator is extremely easy.
AssociatedButtonControlId Property to the CheckBoxValidator Class
In order to update the CheckBoxValidator to disable an associated Button control when invalid, we need to add a public property to the CheckBoxValidator class that enables the page developer to optionally specify the associated button control. To capture this information I created a public property named
AssociatedButtonControlIdand a protected property named
AssociatedButton. The page developer using the CheckBoxValidator sets the
AssociatedButtonControlIdproperty to the
IDof the Button, LinkButton, or ImageButton control on the page that he wants to have disabled when the CheckBoxValidator is reporting invalid data. The
AssociatedButtonproperty is used internally in the CheckBoxValidator code; it returns a reference to the Button, LinkButton, or ImageButton Web control referenced by the
As you can see by the above code, the
AssociatedButtonControlId property is of type
string and serializes its value
ViewState collection. The
AssociatedButton property simply returns a reference to the
AssociatedButtonControlId (if it is set). If
AssociatedButtonControlId is not set or there is no control
ID found, the
AssociatedButton property returns
(For more information on why the
AssociatedButtonControlId property serializes its value to view state, be sure to read:
Understanding ASP.NET View State.)
AssociatedButtonControlId Property Value
BaseValidatorclass, from with which all ASP.NET validator controls derive, contains a protected
ControlPropertiesValidmethod that is called during the page's life cycle to ensure that the validation control's properties are set to acceptable values. The built-in validation controls use this method to ensure that a value for the required
ControlToValidateproperty is set and that it references a valid control on the page. The CheckBoxValidator overrides this method and ensures that the the
ControlToValidateproperty references a CheckBox control.
I added the following code to this method to ensure that if the
AssociatedButtonControlId property is set that it refers to a valid
Button, LinkButton, or ImageButton control. If the property is set, but does reference a control, or if its set but does not reference a
Button, LinkButton, or ImageButton control, an
HttpException is raised.
Adding Client-Side Script to Enable and Disable the Associated Button
CheckBoxValidatorDisableButtonthat takes in three input parameters:
chkId, the client-side
idof the CheckBox;
mustBeChecked, a Boolean value indicating whether the CheckBox must be checked in order for it to be valid; and
btnId, , the client-side
idof the CheckBoxValidator's associated button. This method references the checkbox and button and disables the button if the checkbox's checked state is something other than the "correct" check state (as noted by the
skmValidators.js file, which, at compile time, is embedded in the skmValidators
rendered page output. For more information on this, refer to Creating Validator Controls for the CheckBox and CheckBoxList
and Accessing Embedded Resources through a URL using
that the associated button is enabled or disabled based on the CheckBox's checked state after the browser has loaded the page). This is accomplished
in the CheckBoxValidator's
skmValidation.js). Next, it defines the syntax for the
CheckBoxValidatorDisableButton function call and then
associates that syntax with the CheckBox's client-side
onclick event and when the page finishes loading.
Using the CheckBoxValidator's New Feature
To have the CheckBoxValidator interactively enable and disable a specified Button, LinkButton, or ImageButton control, simply:
- Add a CheckBoxValidator to the page,
- Set its
ControlToValidateproperty to the
IDof the CheckBox on the page whose check state you want to validate, and
- Set its
AssociatedButtonControlIdproperty to the
IDof the Button, LinkButton, or ImageButton that you want to have enabled or disabled depending on the CheckBox's checked state.
The download at the end of this article includes the complete source code to the CheckBoxValidator and CheckBoxListValidator controls, along with
a simple ASP.NET demo website showing how to use these two validation controls (including an example illustrating the
In this article we looked at how to extend the CheckBoxValidator control to include the ability to enable or disable a corresponding Button, LinkButton, or ImageButton control, based on the corresponding CheckBox's checked state. This involved adding a new property to the CheckBoxValidator class, updating the