Validity – flexible jQuery form validation

I was looking for a form validation plugin for jQuery that offers enough flexibility to hook in to my own rather complex forms and existing JavaScript. After auditioning several plugins I came across Validity which has seriously impressed me.

Validity, by Wyatt Allen, offers the key following features:

1. Built-in validators for email, number, url, date, range, length, etc.
2. Equal(), distinct(), sum(), etc, methods for advance validation.
3. Use jQuery selectors to create rules for which fields to validate and compare.
4. Easily extendable using your own regular expressions or js functions.
5. Fully chainable validation. e.g. $("#lastname").require().minLength(2).maxLength(40).nonHtml();
6. Optionally provide your own validation error messages.
7. Multiple validation error display modes: Creates neat arrowed validation messages by each field with an error, or Modal mode, or Summary mode, or create your own! e.g. javascript text based alert, or outline error fields in red, or display errors at top of page, etc.
8. Automatically picks up the name of each form field or use a friendly name with the title attribute. e.g. <input type=”text” id=”firstname” title=”First Name”>
9. Validity can intercept the submit button or be called when you want it to (if you use ajax for example).
10. Only 9KB in size

Some example uses:

$("#title").require().minLength(25).maxLength(250);
The title field is required, min char length is 25 and max length is 250.

$("#duration").require().match("integer").range(1,400);
The duration field is required, must be an integer, and numbers from 1 to 400.

$("#email,#email_confirm").require().match('email').maxLength(70).equal("Email addresses do not match");
Applies to both the email and email confirmation fields, both required, must be a valid email address up to 70 chars, and must be equal to each other. My own error message will be shown if they are not equal.

$("#postcode").require().match(/^([a-z][a-z]?\d\d? ?\d[a-z][a-z])$/i,"Postcode is invalid");
The postcode field is required and must match my own regex for UK postcode validation and will display my own message if it’s invalid.

Here’s the documentation with a couple of little demos. The home page is here and you can download the plugin from Google Code.

Well done Wyatt, this is a brilliantly thought out plugin leaving ample room for developers to customise their own validators, messages, and display rendering. Perfect! :-)

AJAXbouncer – limiting Ajax tampering and leeching

Yesterday I mentioned a proof of concept to try to stop script kiddies and data leechers from abusing server-side scripts that are intended to serve XMLHttpRequests (XHR or AJAX). Playing with URL or form parameters can get the server to return all sorts of data, sometimes even data that the developers didn’t intend you to have access to. The problem is that servers can’t tell the difference between a normal web page request and XHR.

Ray Camden blogged about how jQuery adds an extra HTTP header to help the server tell the difference, but headers are very easy to spoof.

My idea is for the server to issue the web page with an encrypted token. The token is the current date/time and must be sent back to the server for each and every XHR triggered by the current page. If the server doesn’t receive the token, or the token is invalid (i.e. it’s be tampered with) or the decrypted token reveals it’s older than, say, 5 minutes then the server returns a 404 error – page not found.

So, anyone who tries to submit data back to the server through dishonest means will find they get a 404 after 5 minutes. If they try to alter the token they get a 404 too. This will baffle script kiddies or hackers and hopefully they will move on to mess with someone else’s website. If they persist they will realise that they can’t generate their own encrypted token but will have to refresh the main web page every 5 minutes to obtain a new token and insert that into their script. That’s the only weakness in this concept, but taking it a step further you could log the IP from the first failed XHR and block serving that IP for the next 30 minutes. Or refuse to issue a new token within the same session or to the same IP.

As for genuine users you can set the web page to auto-fresh every 5 minutes. It will work best on sites where you don’t expect users to linger on the same page for too long, but of course you may prefer a longer token life (like 15 minutes).

Here’s a live demo – many thanks to Ray Camden for hosting it. The demo’s token will expire after just 90 seconds. The POST data is exposed in a grey area at the bottom of the page so you can tamper with the parameters to see what happens. The demo uses jQuery for XHR, of course.

I’ve commented the code so developers using PHP, .NET, RoR, etc can easily adapt the ColdFusion code. Download the demo code here.

If you improve upon it please let me know.

Oh, in case you’re wondering why I called it AJAXbouncer it’s because it offers a deterrent to potential trouble makers but doesn’t provide 100% safety – like bouncers standing outside pubs and clubs.

AJAX tampering and leeching

Ray Camden blogged about server side security when using AJAX. He discussed a way to detect the difference between normal HTTP requests for normal web pages and AJAX triggered HTTP requests. To the server they look virtually the same.

The problem with using AJAX is that is adds a vulnerability to web applications. People can play around with URL and form parameters to see what else they can extract from your application or database. It can also be used to leech data from your database on a regular basis because, if your data is of any value to someone else, you’re providing it freely in a machine readable format, typically JSON or XML. How can you do something to stop people do that? I mentioned a possible technique when commenting to Ray’s blog and was asked to come up with some code.

I brewed up a demo app and am seeing if I can get the live code hosted (it’s for ColdFusion but the technique applies to any server side language). Stay tuned…

If you want to play with the code on your own CF server you can download it here. No configuration is necessary, just drop the folder into your web root. The code is highly commented so PHP, RoR and .NET coders can easily modify it.