A natural spot for open source development is in the area of web development, an area that I have recently taken a keen interest in. I currently work as a consultant to a company building clientside solutions for their servlet web app. I am also actively teaching myself Ruby and the Rails framework. If you would like to see an example of a site I am currently playing around with, hop on over to this site.

If you are going to write an API that helps with web development, you cannot go wrong with JavaScript. Every website uses JavaScript in some way or form. JavaScript is no longer an ugly semi-useful tool. It is a powerful and useful language that supports things like closures, named parameters and metaprogramming.

There are some amazing libraries being developed in the open source community for JavaScript. One that I have been using a lot lately and which I highly recommend is jQuery. I talked a little bit about jQuery in my last post and gave a little bit of insight into it’s capabilities, but if you are a web programmer and you haven’t checked it out yet, I implore you to do so.

Anyway, Cam and I like to get into discussions about the things we would like to accomplish as programmers and often talk about programming language semantics, features and things we would like to add. We like to bounce ideas off of each other. One of our recent discussions had me suggesting the inclusion of some sort of container class that could be defined on the fly. This could be used as a way of returning multiple values from a function and reduce the need to wrap associations in simple classes.

Our most recent discussion however dealt with a problem Cam was working on in his own side-job where he had a collection of objects and wanted to filter them in some way using JavaScript. The easiest way we could think of to do this was to iterate through each object testing to see if it matched the criteria, if it did, throw it into another collection, otherwise go to the next object. This could look something like this:

temp = ["hello", "heLlo", "jim", "jack", "hellO"]; 
var result = new Array();
var index = 0;
var re = new RegExp(/hello/i);
 
for(i=0;i<temp.length;i++) 
{
   if(temp[i].match(re))
     result[index++] = temp[i];
}

The above code would return the result = ["hello", "heLlo", "hellO"];
That is a lot of code to filter out an array. This spawned the creative process and got Cam working on a little public API that I am assisting with called Arrayzing. You can find the source here.

In order to do the equivalent operation in arrayzing, the code would be:

result = $a(temp).filter( /hello/i ).toArray();

Pretty simple and beautifully powerful. Arrayzing uses jQuery like syntax to perform array manipulations and returns the wrapped set. Additionally, all Arrayzing functions can be chained together!

If you have a moment, please check it out and give us any ideas for features!

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.