Home » jQuery » CustomValidationControl and jQuery

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

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • jQuery Dialog – With Validation ControlsjQuery Dialog – With Validation Controls Chances are, you’ll eventually want to use a dialog box in combination with some form elements, and when you do, you’ll probably want to implement some validation. True, there are some […]
  • jQuery – Using Slider as a ScrollbarjQuery – Using Slider as a Scrollbar Last week I introduced the jQuery UI element known as a slider and indicated that this control could easily be used as a custom scrollbar. Today I'm going to show you exactly how that's […]
  • jQuery – EventsjQuery – Events As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if […]
  • jQuery UI – Resizable w/ ASP.NET ThemesjQuery UI – Resizable w/ ASP.NET Themes If you've been up to the jQuery web site and looked at the documentation for resizable() you probably thought, "hey, no problem, I can do that."  Well, that's what I thought, too, until I […]
  • jQuery – Retrieving HTML FragmentsjQuery – Retrieving HTML Fragments A couple of weeks ago I mentioned that I had built a tooltip using jQuery.  We focused mostly on the positioning of the tooltip at the time because, historically, that's where most of the […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

2 Pingbacks/Trackbacks