WMLScript Example: Validating Form Data

Now we have gone through most of the features of WMLScript. Let's see an example that illustrates how to apply what we have learned so far to do a task that is very often faced by WAP application developers -- validating form data. Below shows the WML document of the example:

(validateFormEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="card1" title="Registration Form">
    <p>
      <big>Registration Form</big><br/>
      Notice: Fields with * are required.<br/><br/>

      <b>$(errorMsg)</b><br/>

      * User name:<br/>
      <input name="username"/><br/>
      * Password (min. 8 characters):<br/>
      <input type="password" name="password"/><br/>
      * Email:<br/>
      <input name="email"/><br/>
      Name:<br/>
      <input name="name"/><br/>
      Birthday (MMDDYYYY):<br/>
      <input name="birthday" format="NNNNNNNN" emptyok="true"/><br/><br/>

      <a href="validateFormEg1.wmls#validate()">Submit Form Data</a>
    </p>
  </card>
</wml>

If you open the WML document in a mobile phone browser, you will see something like this:

The above WML card is used to collect data. If the user clicks the "Submit Form Data" anchor link, the WMLScript function validate() will be executed.

The WML variable errorMsg is used to store the error message to be shown to the user. If the validate() function finds that the form data is not valid, it will assign an error message to the WML variable errorMsg and refresh the current WML card so that the user can know what goes wrong and can then make corrections.

We want to impose a number of restrictions on the form data. They are listed below:

1. The username, password and email fields cannot be empty.

2. The password field must contain at least eight characters since a short password is less secure.

3. The email field must contain the @ character that divides the string into two parts.

4. The birthday field must contain 8 numeric characters.

5. The birthday field must contain a valid date in the MMDDYYYY format. For example, 01401990 is not a valid date since a month does not have 40 days.

Here is the WMLScript function validate() that is called to check whether the form data follows the above restrictions:

(validateFormEg1.wmls)

extern function validate()
{
  var form_username = String.trim(WMLBrowser.getVar("username"));
  var form_password = String.trim(WMLBrowser.getVar("password"));
  var form_email = String.trim(WMLBrowser.getVar("email"));
  var form_name = String.trim(WMLBrowser.getVar("name"));
  var form_birthday = String.trim(WMLBrowser.getVar("birthday"));

  if (""==form_username){
    WMLBrowser.setVar("errorMsg", "The User Name field must not be empty.");
    WMLBrowser.refresh();
    return;
  }

  if (""==form_password){
    WMLBrowser.setVar("errorMsg", "The Password field must not be empty.");
    WMLBrowser.refresh();
    return;
  }

  if (""==form_email){
    WMLBrowser.setVar("errorMsg", "The Email field must not be empty.");
    WMLBrowser.refresh();
    return;
  }

  if (String.length(form_password) < 8){
    WMLBrowser.setVar("errorMsg", "The password must contain at least 8 characters since a short password is less secure.");
    WMLBrowser.refresh();
    return;
  }

  if (!isEmailValid(form_email)){
    WMLBrowser.setVar("errorMsg", "The email address's format is invalid.");
    WMLBrowser.refresh();
    return;
  }

  if (""!=form_birthday && !isDateValid(form_birthday)){
    WMLBrowser.setVar("errorMsg", "The date in the Birthday field is invalid.");
    WMLBrowser.refresh();
    return;
  }

  submit_form(form_username, form_password, form_email, form_name, form_birthday);
}