Form Validation with jQuery Part 2: The ValidatorUpdateDisplay Function

In this two part series I’ll show you how to override the built-in validation functions with your own jQuery-ized versions.

Turn your boring form validation controls into intuitive, user-friendly, and just all around snazzy feature of your web forms.

You’ll make your users want to throw validation errors!

In Part 1 I showed how to override the built-in javascript and highlight an input control if it is not valid.

Here’s the WebForm we finished in Part 1:

Here’s the <head> where the jQuery reference is added along with a couple basic styles:

When the button (btnSubmit) is clicked the form is validated on the client side and if there are any validation errors, the form field will be highlighted with a red border. Fairly straightforward.

For part 2 I want to use the ValidationSummary to show the errors as it normally does but also add some functionality to make it more user friendly. This requires us to override the ValidationOnSubmit function built into Here’s the original function.

The role of the ValidationSummary is to simply gather all the validation errors on the form and either show them on the page (the default method) or show the errors in a JavaScript alert message box or both. I find no use for the alert box so I never use it.

READ  Testing Alfresco Webscripts

Click on the btnSubmit the error message to see the outcome.

Link to an Invalid Control

By default the ValidationSummary shows a unordered list of messages as text. If you’re dealing with a small form with a couple fields then that’s probably ok. If you have a long form that requires a lot of scrolling this is problematic. In the case of our web form, if there were several additional fields then the error summary would show at the bottom of the page and would require the user to scroll and find which field is not valid. This is not ideal. How about if we update the display of the errors to provide a link directly to the field. This may help a little. In order to do that we need to add the original ValidationSummaryOnSubmit function to our custom validators.js file. Now let’s add the functionality to change the display from text to a hyperlink. Here’s the new function:

Now if we run the page in the browser and click the submit button without providing an email you will notice a link to the field.

Making the ValidationSummary Sticky

That’s a good start. It’s pretty ugly though and one thing you’ll notice is that the ValidationSummary automatically scrolls to the top of the page. That is really annoying, especially if you put the ValidationSummary at the bottom of the page. I want the page to scroll to wherever the summary is on the page, so let’s change this line:

To this:

You probably won’t notice much since our form is so small. If you wanted to test it you could add a bunch of paragraphs above the form so the page scrolls.

And this is nice and all but I want more. Why should you even have to scroll the page to see the validation errors? Why not make them static so that when you scroll you always see them? Now we’re talking!

Let’s add some CSS to make the ValidationSummary sticky. I created a CSS file and called it formvalidation.css. I moved the styles that were in the <head> to the new stylesheet and added a reference to it in the <head>.

READ  Why Women Don't Do Programming?

First thing we need to do is add a CssClass to the ValidationSummary control. I’ve also added put an H2 around the HeaderText, so the ValidationSummary now looks like this

Now let’s add some classes to the stylesheet to make it “sticky”. The CSS looks like

Now run it in the browser and see what we’ve got.

Again, you won’t notice on this page, but if you have a page that scrolls the summary at the bottom will stay fixed so you can always see what the errors are no matter where on the page you are.

Collapse/Expand the ValidationSummary

This is great, but how about adding more features. How about if the browser window is small or screen resolution is low and the red box covers everything on the page? How about adding a show/hide button to the header (remember I put H2 tags around the HeaderText)? That will take some additional lines in the JavaScript function. Add the following below the last line we changes (window.scrollTo…):

Now add these styles to the CSS:

Now when we view it in the browser and click the submit button with no email entered we get a toggle link in the top right of the summary. Click on the hide x link and the summary collapses. Click show and it will expand again.

We’re getting somewhere now! Let’s take it further, shall we.

Adding Animation to the ValidationSummary

When the form is invalid the ValidationSummary currently just appears. The style setting in the JavaScript function goes from “none” to “” (blank, which essentially means it’s shown). Since we’re already using jQuery we can add a little animation to spice it up a little. Let’s go back to the ValidationSummaryOnSubmit function and make a couple more changes.

First we need to remove the line = “”; then add the following line after the line we added previously (when we added the show/hide link).

The above line will slide the summary up from the bottom. You may wonder I didn’t use the jQuery function slideUp. The reason is that slideUp actually hides the element. slideDown shows it, but I don’t want the summary to slide down. That’s why I use the animate() {} method.

One final change is to change = “none”; to $(summary).hide();. 

Now when you view this in the browser and click the btnSubmit you’ll see the red panel slide up from the bottom of the page. Of course you could use any jQuery animations. More on jQuery animate() can be found here. You could also reference jQuery UI in the <head> and use some of its animations.

Add Images

One final step is to add a background image to the panel and image for the show/hide link and bullet images for the validation errors.

Here’s the updated CSS classes:

How about Validation Groups?

A commenter on Part 1 asked about using this with ValidationGroups. My answer for this is very technical: It works with validation groups.

Leave a Reply

Your email address will not be published. Required fields are marked *