This tip will show how to get a reference to a validator using client-side script, check the valid state of the validator control, and set a validator control active state client-side as well.

I ran across a situation today to validate two dates (txtStartDate, txtEndDate) with the following criteria:

• txtStartDate is required (use RequiredFieldValidator)
• txtEndDate is required (use RequiredFieldValidator)
• txtStartDate must be a valid date (use RegularExpressionValidator)
• txtEndDate must be a valid date (use RegularExpressionValidator)
• txtStartDate must occur before txtEndDate (use CompareValidator)

Granted, I could write client script for doing this in one fell swoop, but I inherited this page and these validators were already there, and I was just there to fix a bug.

The QA person logged an issue like this:

txtStateDate value – 11/1/2009

txtEndDate value – 11/31/2009 (invalid date)

The “bug” was that in this case txtEndDate is not a valid date. The RegularExpression Validator correctly caught this, but the Compare Validator still fired, indicating a second error. The QA person felt that we should only display an “invalid date” error.

My options were to strip out the RegularExpressionValidator and CompareValidator and use a CustomValidator and write some javascript. But really all I needed to do is disable the CompareValidator if the txtBeginDate or txtEndDate is not a valid date.

It took some doing, but I came up with a simple solution. I added a CustomValidator, and called a client side function called ControlEndDateValidators(). You need one for each date input.

<asp:CustomValidator ID="valEndDateCheck" runat="server" ControlToValidate="txEndDate" ClientValidationFunction="ControlEndDateValidators" />

The function obtains a reference to the validators, and the compare validator is only made active if the data is valid per the RegularExpressionValidators. To check and see if a validator is valid client-side, check the isvalid property for true/false.

<script language="javascript">

    function ControlEndDateValidators(source, arguments)

    {

        var regExpValidatorEndDate = document.getElementById("<%=valEndDate.ClientID %>");

        var regExpValidatorBeginDate = document.getElementById("<%=valStartDate.ClientID %>");

        var compareValidator = document.getElementById("<%=valDate.ClientID %>");

        ValidationEnable(compareValidator, (regExpValidatorBeginDate.isvalid) && (regExpValidatorEndDate.isvalid));

    }

    function ValidationEnable(val, enable)

    {

        val.enabled = (enable != false);

        ValidatorValidate(val);

        ValidatorUpdateIsValid();

    }

</script>

Again, we could write client-script code perform all this validation, but sometimes time is of the essence. Using the functions above, we have shown how to get a reference to a validator client-side,  check whether it is valid, and finally enable a validator on the client-side.