The job requirements included extendability, maintenance, minimal overhead, and it had to work with the current code, i.e. I couldn’t go and redesign the entire system. There were already hundreds of forms in the system with thousands of fields requiring validation. My first task was to explore the different possibilities. I came up with a few various schemes for both client side and server side validations. I opted to go with a client side solution for various reasons, including the fact that I could update the page with any error messages without ever needing to contact the server.

The major problem that I had to address was how to insert my validation functions within the already created web forms in an easy, extensible way. At the time I had been playing around with a JavaScript library known as jQuery. I had very little experience with it, but it seemed very interesting. Cam had also recently begun using jQuery and was big on the library.

One of jQueries big features is easy manipulation of the DOM tree. jQuery ingeniously makes use of CSS Selectors to wrap a group of elements in a jQuery wrapper. If you have never used CSS selectors, I HIGHLY recommend taking a look at them.

Using jQuery, the following simple code:

$('.foo')

returns an array of all DOM elements with the attribute class=”foo”. You can then iterate over this wrapped set in a number of ways. This is immensely powerful. Additionally, jQuery will recognize custom attributes.

The code:

$('input[required=true]')

will return all input elements with a custom attribute required=”true”. What this means is, if you have in your HTML a text field like this:

<input type=”text” required=”true”>

The jQuery code above will find that element and return it in a wrapped jQuery array. I used this as the basis for my validation system.

What I did, was define a set of custom attributes, and a set of JavaScript functions based on requirements given to me by the hiring company. Then I created a validate() function which sequentially called all of my JavaScript functions. This validate function was meant to be called in an onSubmit() but could be called anytime.

If you ever wanted a field to be validated, you simply added my custom attributes to its HTML markup. So for example, if you wanted a field to be marked required, you simply went to that field and added required=”true”. If you wanted a field to be checked for a valid integer, you went to the field and added type=”integer”.

The beauty of this approach is that it allows a field to be marked with an arbitrary number of validations. And removing validation is as easy as removing the custom attribute. Additionally, if you add a new function to the set of JavaScipt functions, all you need to do to add it to a field is add the new custom attribute.

The way this works is, when the person submits the form, the validate function is called. The validate function uses jQuery to parse the DOM tree and iterate over the results. So within the validate function, the first function looked something like this:

$('input[required=yes]').each(function(n)
{    
 
  // validate the required strings.
  var str = validateRequired(this.value, $(this).attr('field_name'));
 
  // If we had an error, concatenate it into the error string and add the errorCase
  errorStr += errorCheck(str, $(this));
 });

What this did was, it searched the page for any input elements with the custom attribute required=”yes”. It then iterated over that set and passed the value into the JavaScript function validateRequired() which checked whether the field was non-empty. It then returned an error string from a function that properly formatted error messages.

Each method concatenated an error string when there were any errors, and at the end of the validate() function if there were any error messages it printed them to the screen in a custom div. Otherwise, it allowed the submit to go through.

This was done for every type of validation, even if there was no elements with that custom tag within the current page. This makes it easy to simply add new validations on the fly. Also, all the JavaScript functions are in a central place and are easy to modify/update and have it filter through the system automatically.

This solution worked perfectly as it was easy to implement and fit the requirements perfectly. The client was pleased and everything worked out.

This may not be the way I would design the validation system today, but it was an excellent choice at the time.