One of the more recent coding projects I’ve been working on is the redesign of the our customer signup process at work. During this process, a lot of data validation & integrity needs to take place from the user entered information coming from the HTML forms. For a PHP/Javascript coder, this scenario has always meant, “Do I validate in PHP? Javascript? Both?” PHP gives you database access but it comes at the price of having to submit the page. Plus, you have to build in extra navigation logic which can sometimes be messy. Javascript is quick & easy, but can be unreliable (user can turn javascript off) and you do not get any access to a database. If you do both, then you split up the validation between specific fields and that becomes flat out messy.

So which route did I go to accomplish this validation task? None. Well, actually all of them, but not by the traditional means. Rather, the best method I found here was to use an AJAX method and split the display (HTML), trasportation (Javascript), and validation (PHP) layers up and keep them completely seperate. By using this method you have a lot of advantages;

  • Because AJAX is as asynchronous, user does not have to submit the form (and wait for a reload). The less clicks for the user, the better.
  • It makes the experience is as smooth as possible for the user
  • Seperation of view (HTML), transportation (javascript), and validation (PHP) layers to make coding much cleaner.

Once I had an understanding of what I needed to build, here is the basic outline of the steps needed to design this app…

  • Be able to convert the HTML form into XML
  • Use the XMLHTTPRequest object to POST an XML string to a PHP script
  • Within PHP, validate data using regular expressions and database queries
  • Denote valid & invalid data values only by adding “valid” and “error_message” attributes to the element nodes and not altering any of the original XML data.
  • Send the same (but slightly modified) XML document back to the Javascript
  • Within Javascript, determine what (if any) errors the user may have with the data entered
  • Inform user of errors

I also had the goal of making this validation process as portable/reuseable as possible and be able to add it to any form by only adding a “onsubmit()” attribute to the HTML form and the error message <div> to the HTML document. Aside from that, everything else takes care of itself in terms of XML creation, validation, error message(s) being displayed, and the input boxes being highlighted within the form.

So here’s a link of a stripped down version of what was built. It isn’t pretty and isn’t meant to show off my design skills. Rather is it designed to demo the functionality and behavior of the script, and then provide the source code (with comments) to build a much more useful app on top of the existing code. Play around with it, modify it, break it, & fix it. That is usually the best way to learn.

Post in the comments below or email me if you have any questions

(Update: I just checked the example page for the first time in a long time, and something is broken. I’ll update again when it is fixed.)