Dismantle Me

As a developer, i so loathe the task of form validation.  It’s a necessary evil for all developers at some point.  I just wish it weren’t so painful.

Fortunately, the asp.net validators will do at a very simple level just about all of the validation that you need on a form.

I am going to be focusing in this post on the custom validator.

My advice for getting on top of these ASP.NET validators is to do two things.  First and foremost, get to know javascript and how to use it to manipulate your form objects.  Secondly, get familiar with the asp.net validators client API.  ASP.NET validators will validate on the server, but lets be frank – you should not have to post back a page to validate it.  That is time consuming, resource intensive, and interrupts the users experience.  it’s also incredibly 2000 and late.

The custom validator is great, because you basically just pass it the name of a function where you will use javascript to do some validating.

Suppose we have a set of radio buttons, and a textbox.  If the person selects “Yes”, we want the textbox to be required.  If they select “No”, then the textbox is not required.  This is very easy to do with the custom validator.  Our HTML is going to look like this…

<asp:RadioButton ID="rbYes" runat="server" GroupName="TestGroup"
        Text="Yes" />
<asp:RadioButton ID="rbNo" runat="server" GroupName="TestGroup"
        Text="No" />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
        ClientValidationFunction="validatePage">*</asp:CustomValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />

Notice that we did not specify an error message in the custom validator.  The error message is what shows up in the validation summary (should you choose to use one).  The text attribute is simply what shows up on the page next to the control that fails validation.

Now we need a client function to validate the page.

function validatePage(source, args) {

            // get references to our page items
            var no = document.getElementById("rbYes");
            var yes = document.getElementById("rbNo");
            var txt = document.getElementById("TextBox1");

            // check to see if they checked yes.  if they did,
            // check to make sure the textbox is filled in with some
            // text.
            if (yes.checked)
                if (txt.value == "") {
                // setting the args.IsValid = false will tell our
                // custom validator that we failed validation
                args.IsValid = false;

                // optionally, we can set the error message portion
                // of the source object (the validator)
                source.errormessage = "You selected YES, so you must fill in the textbox";
            }
}

This will validate our form conditionally based on the selected radio button.  See how easy that was?  If you want to get fancy with your validation feedback, the asp.net validators fall a bit short.  As long as you are content to stick with the basics, they are pretty much all you will need in your validation toolbox.