Wednesday, July 12th, 2006

A Basic Approach to Server-side Data Validation with AJAX

Category: JavaScript, Programming

Input validation can be one of the biggest hurdles in a web application (besides being one of the most important). As much as we as developers hate to think about it, there will be users out there that try to stretch the limits of the app, finding the weak spots. Don’t let input validation be yours – always check what the user gives you. How, you ask? Well, that’s what this new article from is for.

Would you like to learn how to validate user-supplied data using JavaScript, but without the risks? This article will show you how to handle it in a way that takes advantage of JavaScript’s pluses, but adds a level of safety, thanks to AJAX. It is the first of three parts.

This validation mechanism can be developed bearing in mind specific conditions where JavaScript has been disabled by the client, while still maintaining its full validation capabilities on the server. Indeed, this approach can be quite useful for constructing richer Web applications, and that’s precisely what I’m going to do in the next few lines: build an AJAX-driven form validation application, which will use PHP for validating data on the server.

They start building their sample application with the interface – a simple form. Since a basic form is a bit of an eyesore, they also use a little bit of CSS to help clean it up a bit. They combine them both to make the sample interface (complete with code/HTML). There’s no Javascript or validation in this part of the series, but this does lay down the groundwork for the future editions as they get more and more advanced.

Posted by Chris Cornutt at 7:03 am

3.3 rating from 35 votes


Comments feed TrackBack URI

what about the performance of this solution? a request is done by every onblur event. wouldn’t it be confusingly if you fill out the form very fast and the result of a request is returned when you’ve already filled in another field?

i had a different approach in my mind: why not sending all fielddata onsubmit`and cancel the submit event, if an error occured?

Comment by harald — July 12, 2006

Another danger of doing a request for each onBlur is the possiblity of responses arriving at the client out of order, e.g. Req1, Req2; Resp2, Resp1. The application must be built to handle this case, with relevant element IDs returned bundled with each response.

Comment by thenobot — July 12, 2006

This is basically a (bad) html tutorial !

After mentioning accessibility/quality, basic practise such as using labels was ignored.

Furthermore, the author doesn’t explain why ajax validation is any better than javascript validation, or even give any code.

Javascript can use regular expressions and has nearly as much power as PHP – and is a lot faster and less server resource intensive than numerous ajax calls.

You still have to validate the data serverside as well – ‘10% of users dont have javascript anyway’.

Comment by dcaunt — July 12, 2006

One benefit could be this: Say you have server-side validation, you could set up your validations rules as an XML block, then with the form onsubmit it could grab the XML rules from the server and run the validation from the same rules. That way if a user has javascript disabled the same rules can be applied and you have less code duplication. Even though it does mean a call to the server for the client-side validation, this would still be a lot smaller packet than having the server receive the full form data, plus send the full response page.

That way the client-side validation is still powered by javascript, but only one set validation rules need to be maintained by the developer. And whether you pre-process the form with javascript or not, you need to validate server-side anyways, so this way it’s less maintenance work, and less server chatter! :)

Comment by Mike Ritchie — July 12, 2006

why waste the band with by using ajax? Most data validation is regular expression or can be done using javascript. In the case that the validation is a regular expression just share that expression on both the server side code and the javascript code. and for complex validation use the server or fix your interactions because they’re too complex.

Comment by todd — July 12, 2006

Zapatec.Forms are still best for client-side validation.

Comment by vanger — July 13, 2006

I’m a chinese!My job is to programme with java!

Comment by zhuyong — July 13, 2006


Comment by Deepak — February 6, 2007

Leave a comment

You must be logged in to post a comment.