Remote Scripting with AJAX, Part 2
by Cameron Adams | Pages: 1, 2, 3

Tip #2: Don't Interfere with the User's Interaction

Users become frustrated with interfaces that interfere with the completion of their tasks. In Example 1, such interference might occur after users have entered a receipt number: if they begin to fill in their names and email addresses before the receipt number has been verified, those details will be overwritten once their user data is received from the server.

To rectify this, Example 2 checks whether a user has changed the values of the text fields before the script enters any data into them. The default values of the text fields can be detected when the page loads, and recorded using custom DOM properties:

email.defaultValue = email.value;

The default value of a field can then be checked against its current contents before the script attempts to write any data into it:

if (email.value == email.defaultValue) 
  { 
 email.value = newValue; 
  }

This makes sure that the user--who probably knows his or her own name better than we do--doesn't have any entries overwritten by overzealous automation.

Some other common cases of interference that you should avoid include moving the cursor to a field while the user is filling out another field, and locking the user out of the interface (which is why XMLHttpRequest should be used asynchronously).

Tip #3: Catch Errors Early, But Not Too Early

It's best to catch errors as soon as they occur. Many forms that currently appear on the Web rely upon the user to submit the form before any form errors will be shown, either using server-side scripts or inelegant JavaScript alerts (as per Example 1). These methods have several disadvantages for the user:

• The process of submitting the form takes up the user's time.
• JavaScript alerts do not permanently mark all of the fields that require correction.
• Indicating errors well after they have been committed requires the user to mentally recollect what the erroneous field asked of them.
• Even if users know which form elements to correct, they will have to re-submit the form to find out if those elements have been corrected properly.

For those reasons, it is much better to inform users of an error as soon as they have made it. In Example 2, if a user enters an invalid email address, the application tells them straight away. The notification is placed right next to the email field, using the message() function from Tip #1:

Figure 4.

However, you shouldn't check for validity as soon as a user starts typing, as it is distracting--not to mention annoying--to be told that you've made an error before you've even finished entering the data. Field checking should only be done once a user has finalized the entry; i.e., when they move away from the input. For text fields, this type of action is best captured using the onchange event:

email.onchange = onchangeEmail;

The function that is triggered by the event can then check the field and ensure that the data it contains is valid for that data type:

function onchangeEmail() 
  { 
 if (!this.value.match(/^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/)) 
 { 
   field.valid = false; 
   message(field, "errorMessage", "Please enter a valid e-mail address"); 
   field.className = "text error"; 
 } 
  
 return true; 
  }

Tip #4: Let the User Know When an Error Has Been Fixed

Once a field has been found to be incorrect, and the user has been alerted to the error, it's equally important to let the user know when he or she has changed it to be correct; otherwise, the user will become trapped in the form submission cycle once again.

In these circumstances, it's not good enough to wait for the browser's onchange event to fire, as that usually occurs only when the user defocuses a form element. Therefore, it is best to use the onkeyup event to check the correctness of a field that was known to be incorrect:

email.onkeyup = onkeyupEmail;

The onkeyupEmail() function checks whether the email field has an error message displayed alongside it before moving on to check whether the field is correct. Thus, as soon as a user makes appropriate corrections to the field, the error message will disappear; however, if the user is typing into the field for the first time, no message will appear:

function onkeyupEmail() 
  { 
 /* If an error message is displayed */ 
 if (this.message != null && this.message.className == "errorMessage") 
 { 
   if (this.value.match(/^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/)) 
   { 
     this.valid = true; 
  
     /* Remove error message */ 
  message(this); 
  
  /* Remove error CSS class */ 
     this.className = "text"; 
   } 
  ...

These scenarios don't capture the case in which mandatory fields have been skipped, so it's a good idea to allow the user to submit an incomplete form, as this allows the program to highlight exactly what needs to be completed, instead of searching for details that have not yet been filled out.

Pages: 1, 2, 3

Next Page