Friday, July 28, 2006

Cool Controls: Custom Validators

Custom validators are pretty cool to use in ASP.NET 2.0. There are quite a few samples on the web for getting these hooked up. However, most of the samples are REALLY simple in the client-side script. I wanted to throw this one out there just in case someone else has to do something similar.

The Sample:
Lets say you have a checkbox and a DropDownList, and you want the DropDownList to have validation on it only when the checkbox is checked. When the checkbox is not checked you want the DropDownList disabled. Okay, sounds pretty simple, but can we do it without a postback.

Toggling the Disabled property

The JavaScript to toggle the DropDownList disabled property can be done like so:

<script type="text/JavaScript">
function Change(chkfield,field)
if (chkfield.checked == true)
{ document.getElementById(field).disabled = false; }
{ document.getElementById(field).disabled = true; }

Notice that I'm passing in the checkbox object and the field to be disabled. The DropDownList will be called "dd1."
In the checkbox you just plug in the function like so:

<input id="chk1" title="chk1" onclick="Change(this,'dd1')" type="checkbox" value="X" name="chk1">MyCheckBox

Adding the CustomValidator
Next we add the CustomValidator control after the checkbox. The code would like the following:

ID="CustomValidator1" runat="server" ClientValidationFunction="Checkit" ControlToValidate="dd1"
ErrorMessage="Required Field" Font-Size="Large">*</asp:CustomValidator>

With the CustomValidator control you can supply a "ClientValidationFunction" that will be called. Remember to provide a server-side function as well because if you don't it can be a security risk according to Microsoft. For this example I left that out.

The Validation Function
The validation function, called "Checkit" in this example, will check the validation of the DropDownList "dd1."

This function would look like this:

function Checkit(sender, args)
if(!document.getElementById(sender.controltovalidate).disabled && args.Value=="bad")

Notice that the function is checking for a value of "bad" in the args.Value. The CustomValidator doesn't like having null values in there so just put the word "bad" in the value of your empty selector item in the dropdownlist. There was a hack for getting this to work with null values but for this example this should do nicely.

Anyway, that's it for the Custom Validator control. Another cool control in the ASP.NET arsenal.

Happy Coding!

DX Jas


  1. Anonymous12/05/2006


    Can u please explain, how to edit errormessage of a custom validator from javascript if we are dealing with multiple validations and returning the message back.

  2. Hi Anonymous,
    Sorry it took so long to get back with you. I don't get notified when someone comments. Too many spammers....

    So, you're using the validator in dotnet. You have some javascript that runs on the client side to check if it passes or not.

    There are a few ways to handle error messages. The validator control has an error message property that can be set. So, when it calls the javascript to find out if it is valid, it will display the error message if it failed.

    Another option is the Validator Summary control. This control will list all of the Invalid strings in a neat area.

    Yet another option is to bypass the error message built into the controls and just set some text in the javascript somewhere. So, if you have a div in the top of your page you could set the text of that div to whatever you want in your javascript. You can probably google "javascript set text" or something and get some hits. If you need an example let me know and I'll stick it up on my blog for you.

    Happy Coding