Recently I've had a few questions about how to use the datatables plugin to display data, and also integrate a pop up or lightbox function. The pop up would have an edit form in it, and when the user completes the edit the light box goes away and the datatable refreshes.

This is relatively straightforward to do, but there are several key concepts to getting everything working correctly, so I've broken it down into a few chunks.

[ More ]

The datatables JQuery plugin ( http://www.datatables.net/ ) is an incredibly powerful way of displaying tabular data and allowing the user to manipulate it without leaving the current view.

The plugin already features paging and sorting, but what if you want to extend the plugin with some other non default behaviours like drag and drop? Using a previous example ( http://www.mccran.co.uk/index.cfm/2010/4/29/JQuery-Datatables-plugin-example-using-a-server-side-data-request-coldfusion ) as a starting point I thought I'd try and integrate drag and drop with the datatable object.

[ More ]

The http://bassistance.de/jquery-plugins/jquery-plugin-validation/ JQuery Validation plugin is a fantastic option for adding client side JavaScript validation to your forms.

It comes with quite a few pre defined validation methods (you can see them here: http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods), but what if one of your fields requires a bespoke validation type, for example matching the first N characters of a string.

Well its pretty easy to do, you just have to plan your new rule, and programatically add it to the plugin. In the example below I am going to match the string '123456' and check it as a rule, alongside the existing rules.

I'm assuming you have already imported the JQuery library and Validation plugin. Next we use the addMethod() function of the Validation plugin to add a new custom method. This accepts a few different arguments, as detailed below:

Name (String)
The name of the method, used to identify and referencing it, must be a valid javascript identifier

Method (Callback)
The actual method implementation, returning true if an element is valid. First argument: Current value. Second argument: Validated element. Third argument: Parameters.

Message (string / function)
The default message to display for this method. Can be a function created by jQuery.validator.format(value). When undefined, an already existing message is used (handy for localization), otherwise the field-specific messages have to be defined.

As an example I have created a new rule called 'pattern-match', this rule will check if the passed in element is required 'this.optional(element)' OR if the first six characters match the designated pattern, in this case '123456'.

This code creates the new validation method, now we can reference it in our validate() method just like all the pre existing methods.

Just add it in with the other methods, and specify the the error message that goes with it.

The addMethod() function will take any form of custom validation that you can write in standard JavaScript, so it should be possible to accommodate any bizarre rules you might want to come up with.