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: JavaScript, qForms, HTML/ColdFusion

10 Comments

  • Steve Nelson's Gravatar
    Steve Nelson
    Holy crap that's cool! Is this cross browser?
  • Nelson Winters's Gravatar
    Nelson Winters
    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
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    >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.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    >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.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    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.
  • mark kruger's Gravatar
    mark kruger
    Dan - that's a great example! I like where you are going with this.
  • Rick Mason's Gravatar
    Rick Mason
    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.
  • Matthew Lesko's Gravatar
    Matthew Lesko
    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.
  • Especialista's Gravatar
    Especialista
    Dan, great, great, great. Great again. How to download a full qforms/ajax example? It's possible?
  • Alex Aguilar's Gravatar
    Alex Aguilar
    checking of username, demo, guest, admin or dswitzer does not work in Firefox 2

Comments for this entry have been disabled.