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.)
February 26th, 2006 at 7:17 am
I assume you’d do the validation twice when the form is actually submitted, right? Once from the AJAX call and another for when it’s validated remotely - after all, JavaScript could still be turned off.
February 26th, 2006 at 12:36 pm
Honestly I take the easy way out and require Javascript to be enabled by redirecting them to a page that explains how to turn javascript on.
If for whatever that fails, a side-effect of the javascript code wouldn’t advance them anyways. This code isn’t in the demo code, but the process by which the form is submitted in the real application is generated inside the javascript. Once I detemine there are no errors….
s = document.createElement(”input”)
s.type = “hidden”;
s.name = “next”;
f.appendChild(s);
f.submit();
However, because this solution is XML based, it is definitely possible to submit the form and use PHP to do the same thing the Javascript code is doing by using cURL (or any other method) rather than JAvascript’s XMLHttpRequest obect.
In the real application, I am using AJAX (this demo) to validate per field during the signup process. At the end, all that information is packaged up and put into an XML string which is sent off to be validated against an XSD schema file.
April 25th, 2006 at 10:08 am
Hi,
Great work. I have been trying to write something like this for while unsuccssfully. I tried to copy your form and two files as they are however, I can not get them to work. I do not see a call for the php file in the form. Could you send me any info on how to get the two file to work for a form? I am so sorry for bothering you. Again, this is just simply great. Regards, –jh