qForms v2.0 - Real-time Server Validation Using xmlHttpRequest()

Posted by Dan on Jul 8, 2005 @ 11:48 AM

The buzzword "AJAX" is becoming all the rage these days. While the concept surely isn't new, the method of delivery has changed. A comment by Oguz Demirkapi over on Mark Kruger's "Client Side and Server Side Validation - a case for both" blog post got me thinking about AJAX and qForms. Oguz said:

and we use also Ajax for server side checks. As an example: while registering for our website our Ajax code check whether entered e-mail address has already been in database or not. And than show error msg directly as client side action.

It is a really great option to check availibility etc.

With all the changes I've made to qForms, I figured it would be pretty easy to throw together a little example form that used AJAX techniques to validate a field against live server data. Instead of using a validation method, were instead going to check the value onblur (so that we can then query the server while the user is interacting with the rest of the form) and then we'll display an error is the user has selected a user name that's already being used.

For some examples of what can be done, check out the example below:

qForms v2.0 - Real-time Server Validation Using xmlHttpRequest()

Categories: HTML/ColdFusion, qForms, JavaScript

10 Comments

  • Holy crap that's cool! Is this cross browser?
  • Very cool Dan! In case you weren't aware, the message that appears to the right of the Username field when an invalid name is entered appears when I try it in Firefox, but not in IE.

    -Nelson
  • >Holy crap that's cool! Is this cross browser?

    It should be compatible with any of the newer browsers. Although there does appear to be an IE bug as Nelson pointed out (which ironically doesn't appear to be related to the AJAX, but w/the qForms DHTML add-on library.) I'm going to check in to the bug.
  • >Very cool Dan! In case you weren't aware, the message that appears to the
    >right of the Username field when an invalid name is entered appears when I
    >try it in Firefox, but not in IE.

    This actually appears to be an error in the throwError() stuff for IE. I'll check in to that and try to get a fix posted this weekend.
  • The bug was fixed. Turns out the problem was w/how IE queues events--which has always been one of my pet peeves.

    IE likes to queue visual DOM events in a function and then run them all asynchronously.

    So, the reason it didn't appear to work in IE is because it would throw the error and then right away put focus in the field--which would cause the error to go away.

    I really wish there was a flush() or render() method in which you could tell the browser to refresh the DOM.

    To work around this problem, what I had to do was add a qForms property to prevent the allowFocus() method from running. I then use the setTimeout() to reset the property.

    Fortunately, Firefox doesn't seem to have that DOM issue. Unfortunately, I have to code around it.
  • Dan - that's a great example! I like where you are going with this.
  • Dan,

    This is terrific stuff. Question: Would adding Ajax to your two selects related example allow you to speed that up as well?

    Any access to the underlying Ajax engine would be fantastic though.
  • I think that putting native AJAX hooks into qForms is a Good Idea (tm).

    These are some things I think might be interesting to incorporate into qForms:

    1. AJAX server-side validation and related fields (ex. selects).
    2. Server-side validation components that replicate the qForms client side validation.
    3. Ability to define validation, dependencies, related fields, etc... in an XML document that can be parsed both by qForms and a server side component.
    4. HTMLish Custom Tags (i.e. Coldfusion or JSP) for form fields that have attributes for qForms validation.
  • Dan, great, great, great. Great again. How to download a full qforms/ajax example? It's possible?
  • checking of username, demo, guest, admin or dswitzer does not work in Firefox 2

Add Comment

Leave this field empty