September 10th 2008

Client Side Validating Bulk Insert With jQuery Validation Plugin

Updated 09SEP08: Now working in FF3, Jorn Zaefferer pointed out via the jQuery Mailing List that my script tag declaration was incorrect. I also added a better RegEx for the phone number.

I have been working on a proof of concept for a way to insert a bunch of contact data for a record. One of the requirements that has been pretty challenging is the client side validation since a lot of info isn’t known until run time.

Live Demo | Download (HTML, CSS, JavaScript)

End Product Image

  1. User could enter anywhere from 1 to 5 contact methods in the case of this example.
  2. If a type is entered then info is required and vice versa.
  3. Depending upon the type chosen the validation is different.

End Product With Instructions Image

So far I am using the jQuery Validation Plugin by Jorn Zaefferer which appears to have been around for quite a while with a big following.

Here is all of the jQuery:

And the HTML for the first Row:

So I think I have a good start, but it could be improved still. Let me know what you think and what I missed.