One of the ideas that we have been throwing around the office is creating a platform that will create the form-validation-database cycle automatically. Something akin to ORM, but not. ORM looks good, but we want more control over what is happening.

In this article I am exploring the idea of automatically creating JQuery validation from a simple Coldfusion input. In this case a list of required fields. I'll say up front Ray Camden's blog entry on Jquery Validation (http://www.coldfusionjedi.com/index.cfm/2009/2/10/An-Introduction-to-jQuery-and-Form-Validation-2) has been an invaluable help.

The principle behind this is that you can create a generic validation object routine, and simple provide it with a set data object (list or struct, haven't decided yet) and have it match against a form and validate it. So with that in mind we will create a simple form.

As you can see from above, this is a simple form. Next we will include references to the Google code repository for the AJAX library, and out JQuery validation plugin. Next we have the JQuery script to validate our fields. Firstly we create a list of the fields that are required. By doing this it is incredibly easy to add another required field to the model. The next phase of this will probably accept a structure rather than a list, in that way I can combine field lengths and any other custom criteria, rather than merely the fact that it is required. The JQuery validation starts off in exactly the same way as usual, we create a function to catch the validation request, and use the id of the form as the reference. We declare the error container style of "#error". Next we loop over our list inside the "rules:" element. This creates the required rules for each field. I've also added a basic check for the value 'email'. This will create an email validation rule. Next we create custom messages in the "message:" element. Again this catches the email value and adds an appropriate message. Lastly we can create a style for the #error container we declared above.

This creates a totally dynamic validation routine - all fed from a list. I think it forms a good basis to build a more dynamic rules driven model, where you can set field lengths as well.

There is an example of the complete code here, along with a variation on the inline or external placing of the validation messages.

Follow this link for a demo of the JQuery validation model.

With the UK currently stumbling to a halt due to snow I've been working from home. I like working from home, it has many advantages like the time saved in commuting, and the fact that you usually know your own hardware/software setup better than works.

One thing it has highlighted is that as a software developer your actual location is now totally irrelevant. Even for team based projects you do not all have to be in the same physical location. Our physical and online worlds have become so enmeshed that is it now common place to be able to work productively from anywhere.

So with that in mind I thought I'd do a quick round up of my favourite remote working applications. Some are more "best practices" with recommendations if I've been using a specific product. Warning: all recommendations may contain nuts.

1. Online Code / Asset Source Control

Having your code in an online repository is an absolute life saver. Not only does this contribute towards a "Business continuity" plan for regular working, but it means you can get to it from anywhere. We should all be using source control anyway, but having it online means that it's much more easily maintained and you are not moving code around on USB keys.

I use an application called Beanstalk. www.beanstalkapp.com. They have worked well for me so far, and the basic account is free.

2. Virtualisation

The Virtual PC software market has moved on considerably in the last few years. To the point now where there are free versions of virtualisation software that allows you to create virtual pc's inside your actual physical pc. I use this at work and at home for a few reasons. Firstly I don't even have a physical development server anymore, it is a virtual windows 2003 server, and secondly this is great for setting up specific testing environments. Need a windows XP running Internet Explorer 6? Create a new virtual image and install XP, it is far more reliable than multiple IE's or other Internet Explorer emulation software.

I use VM ware server 2.0, its totally free (Virtual pc's operating system licences aren't so be careful) you can get it here: http://www.vmware.com/products/server/

3. Instant messaging / Skype

Communication in any team is important, especially so if you are working remotely. If no-one can contact you then appearances may be that you aren't working at all, which is bad news. I use Skype http://www.skype.com/intl/en-gb/ which can be used for chat and messaging.

The obvious benefits are that it is free, and means you can have team discussions online. More recently I've encountered several companies that actually use Skype as their main communications tool. They don't even have desktop phones anymore.

4. FTP clients / File synchronisation utilities

Ideally you can still provide any of your in-office functionality at your remote location. So being able to implement change releases is essential. I use a combination of Filezilla http://filezilla-project.org/ which is a free FTP client, and Beyond Compare http://www.scootersoftware.com/ which is a file comparison tool. Ideally I'd like to learn ANT, but just haven't got round to it yet.

5. Online file storage

Services like DropBox https://www.dropbox.com/ are invaluable for the online storage of files. We always have online briefs, and Photoshop designs flying around the place, so storing them in one central online location is an ideal way of ensuring that you always have the latest version. It also avoids the problem of not having the project spec, and not being able to work.

I personally use Google Docs for this http://www.google.com/docs I've found it to be a very flexible easily maintained way of storing pretty much any format of document.

I'll say this up front, I'm not a CSS guru. I like CSS, but it can be incredibly frustrating. One of the clients I am currently producing work for requires a high level of Accessibility. High enough that we need to avoid using JavaScript unless any script has a "Non" JavaScript equivalent.

The site navigation is through a top level horizontal menu, but what if we also want a drop down menu? Can we do it in CSS only, and it still be Firefox, Internet Explorer 6,7 and 8 compatible?

Yes, we can, but it's a lot of code, and it's not pretty. The basic concept behind most CSS menus is to use a list, and transform each list item to suit your styling. So we will create a div, with a class of menu. Then create a list inside it.

Notice that there are some specific if statements relating to different versions of Internet Explorer. these basically make the functionality the same for each version, they are compensating for the differences in code handling between IE versions.

Next create a set of CSS styles to alter the appearance of the list. I am not going to go into the CSS line by line, as it is commented, but I'll explain the methodology behind it.

The top level menu item is always displayed, but the list is hidden using "visibility:hidden". When the user mouse's over the menu div the CSS applies a:hover ul{visibility:visible;. This makes the list visible.

There are also a lot of other browser specific hacks present, as the aim was to get the menu working in every Internet Explorer version, and be Accessible.

There is a demo of this here: CSS menu demo