.NET Answers

Recently I needed to use a custom validation control to check to see if multiple controls had something in them. Yes, I know this is what the required field validator is for. But the client wanted one message for all of the fields and this is the only way I could think of that made sense. Even if I used the validation summary control, I would get one message field with multiple messages in it. That’s not what we were looking for.

Anyhow, once I figured out that what we needed here was a custom validation control, I thought about using jQuery to make life a whole lot simpler.

While we can create client side validations with the custom validation control, one of the issues we face when writing the code is that we have to locate the fields on the page using javascript and retrieve their content prior to doing any validation.

The only viable way to do this using javascript is by using the getElementById() javascript function.

Since the fields are runat=”server” controls, this also means that we need to find the ClientID of each field or hard-code the ID in our javascript. If we use ClientID, this forces our javascript into the ASPX page, which a javascript purist would want to avoid.

By using jQuery instead, we are able to put the validation function in a separate js file that is loaded by our ASPX page. By adding classes to each of the input fields we want to validate, we are also able to retrieve the specific fields we want to validate without jumping through a whole lot of hoops.

Here’s what my jQuery code ended up looking like:

function CustomValidation(source, args) {
    args.IsValid = true;
    if (
        $(".firstName").val() == ''
     || $(".lastName").val() == ''
     || $(".jobTitle").val() == ''
     || $(".emailAddress").val() == ''
     || $(".phoneNumber").val() == ''
     || $(".establishmentName").val() == ''
     || $(".postalCode").val() == ''
     )
        args.IsValid = false;
    else
        SelectValidation(source, args);
}

function SelectValidation(source, args) {
    args.IsValid = true;
    if ($(".businessType option:selected").val()
        == '- please select -'  ||
        $(".businessType option:selected").val()
        == '- Veuillez choisir  -')
        args.IsValid = false;
}

This site is in English and French so I needed to do two checks in the SelectValidation() function. If it were in any more languages, I think I would set a global variable in the ASPX page using the resource file and check against the global variable instead of the hard-coded string.

One possible embellishment would be to class all the text fields as “notempty” and use the each() method to set args.IsValid = false if one was empty. I didn’t think of that soon enough when I originally wrote the code.

I’ve written custom validations using straight javascript and I can tell from experience using jQuery makes the whole process MUCH easier.

Other Related Items:

jQuery: Novice to Ninja

jQuery: Novice to Ninja is a compilation of best-practice jQuery solutions to meet the most challenging JavaScript problems. In this question-and-a... Read More >

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

jQuery simplifies building rich, interactive web frontends. Getting started with this JavaScript library is easy, but it can take years to fully re... Read More >

Super Soft Luxury Cashmere Feel Fringe Scarf - (Choose from 33 fashion colors / patterns)Experience the soft luxurious feel of cashmere feel fashion neckwear. Get the look and feel of high end scarves at an affordable price. Choose from ou... Read More >

Related Post

• jQuery 1.4 Released
• jQuery and ASP.NET UpdatePanel
• jQuery, Each() and Async Gets
• JQuery, Cufon, and Dynamic Content
• Flash to jQuery

Bookmark to:

Hide Sites

2 Responses to “CustomValidationControl and jQuery”