Sometimes you get a project that gives you no choice but to hit Google for solutions that are as near to perfect for your specific parameters as possible. In this case, I was tasked with designing and developing a special web page for a contest that included a form for collecting user information and contest submissions. The problem, though, was that I had to design the contest page before I had any content to work with, and I inadvertantly painted myself into a corner: I designed the page to be no taller than a certain height, and due to time contstraints, I couldn’t rework the design. The form and content I had to work with, in their unstyled state, completely broke the page design.

This left me with one choice. Streamline the form design, strip out the native validation that inserted error messages into the page flow (thus breaking the design), and apply a complete, browser side validation script that would overlay error messages on top of the design, without impacting it. Needless to say, this was a little stressful, and I was starting to have doubts I would find an open-source solution that would fit the bill. Most current, popular browser-side validation scripts rely on inserting CSS based messages next to, below, or above form fields.

After much searching, I found this little gem: Dynamic JavaScript Form Validation. While it lacked the ease of application that has made jQuery and other libraries so popular, with just a little modification to my form and to the source script, I had a solution that brilliantly and perfectly met my needs. See it in action for yourself on the completed project.

My sincere thanks goes to Michael Leigeber and his very helpful blog.

Download Dynamic JavaScript Form Validation here.