CustomValidationControl and jQuery

animal-018 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 post in jQuery

Related Post

2 Responses to “CustomValidationControl and jQuery”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear