Show-n-Tell Thursday

Posting to a Form for AJAX validation

I am guessing that this has been done before elsewhere but it was a new idea for me anyway.

A couple of weeks ago Julian and Philippe were talking about using the Scriptaculous Autocomplete feature. Philippe had the cracking idea of using a page to do DBLookups on the fly to provide JSON data.

While on the train this morning I came up with the idea of performing complex form validation using a similar technique. The sort of thing I am thinking of is uniqueness checking, complex business rules and so on but without the overhead of firing up an agent to do the processing, submitting to a form will do that same task much faster.

It's definitely worth having a read of Philippe's article that I mentioned earlier. What I am proposing is that rather than running a "GET" request from a page which he suggested for the autocomplete tool, that we create a simple form which we "POST" to, to make sure that all of the fields are valid, before submitting the "real" form to be saved. Let me describe things in a little more detail. I have a form which is registering a new user for an application. I need to make sure that the company name of the user is valid and that his email address has not been used for any other users that are already registered. Now this is pretty simple stuff to handle with normal form validation or webquerysave agents but I am not a big fan of the user submitting, waiting for a screen refresh only then to be told they've got something wrong.

So instead, before submitting the form, we run some javascript which creates an AJAX request (as usual I am using Prototype but you can use your preferred framework). My submit function looks something like this:
function submitClient() {
//Now we do the server side validation
var a=$H(
{
clientnameandcode: $F("clientnameandcode"),
email: $F("email")
}
);
var myAjax = new Ajax.Request(
'/validateNewclient?createdocument&rand=' + Math.floor(Math.random()*1001),
{method: 'post', parameters: a.toQueryString(), onComplete: submitclientContinue}
);
}
function submitclientContinue(jsonDoc) {
if (jsonDoc.responseText == "\n") {
//All the validation has been passed so submit properly
document.forms[0].submit();
}else{
//There are error messages so display them in a div on the form
$("validation").innerHTML = "

" + jsonDoc.responseText +"

"; $("validation").style.display = ""; } }

The two fields I am interested in, clientnameandcode and email are posted to the form called "validateNewClient". The form then has the following design:



The things to note are...
  • The SaveOptions field which is set to "0" to prevent the document being saved
  • The two data fields which match the parameters sent in by the AJAX request
  • The $$Return formula which actually does all of the validation work, it just computes some response messages where there are errors, or empty string for successes.

    Now the only "hack' I've had to do is with the return value from the $$Return, where because @SetHTTPHeader("Content-Type"; "text/text") doesn't work I have to redirect the message I want to return to a page where I can format the message as simple text to be returned to the AJAX request.

    This isn't an approach which I would recommend for every situation, but where you have relatively complex business rules which need to be validated and the network can handle the extra load etc then I think it's quite neat.

    Of course the one caveat is that with client side validation you must always, always double check on the server side to prevent sneaky people circumventing all of the Javascript you have written to make their lives easier!

    Technorati Tags: Show-N-Tell Thursday