ColdFusion Article

Introducing ColdFusion MX 7

Improved Form Field Validation

Data-entry forms have long been the Achilles heel of web-based applications. Without bad-mouthing HTML forms (actually, there is little need to—you've all experienced the pain firsthand), ColdFusion MX 7 improves forms in several ways, starting with improved form field validation.

For starters, ColdFusion contains additional validation types, including the oft-requested validations for e-mail and URLs. In addition, the JavaScript error message that appears when using client-side validation displays all of the validation errors at once, not just the first validation error.

Perhaps more importantly, it is now simpler to perform both client-side and server-side validation at once. The cfinput tag has a new attribute named validateAt that accepts three values:

• onSubmit (the default value) specifies client-side validation when the client submits the form, just like client-side validation in the current cfinput tag.
• onBlur specifies client-side validation as soon as a field loses focus (user tabs to the next field or clicks another field, for example).
• onServer specifies server-side validation, the same type of validation that hidden form fields perform. However, it does not require you actually to define those fields (the fields are still present, but are generated and embedded automatically).

Look at the following code:

<!--- Client-side validation on submit --->
<cfinput type="text"
         name="quantity"
         validate="integer"
         validateAt="onSubmit"
         required="yes"
         message="Numeric quantity is required!">

<!--- Client-side validation on loss of focus --->
<cfinput type="text"
         name="quantity"
         validate="integer"
         validateAt="onBlur"
         required="yes"
         message="Numeric quantity is required!">

<!--- Server-side validation --->
<cfinput type="text"
         name="quantity"
         validate="integer"
         validateAt="onServer"
         required="yes"
         message="Numeric quantity is required!">

All three cfinput tags perform the same validation but at different points within the form submission process. The best part is that validation methods may be mixed. So to validate on the client and server you could do the following:

<!--- Client-side validation on submit --->
<cfinput type="text"
         name="quantity"
         validate="integer"
         validateAt="onSubmit,onServer"
         required="yes"
         message="Numeric quantity is required!">

Here the validateAt attribute specifies two values (onSubmit and onServer) so that ColdFusion generates client-side validation code and embeds hidden form fields for server-side validation.

Another validation enhancement is input masking. ColdFusion MX 7 introduces a new attribute to solve this problem: mask takes an input mask and uses it as a data input filter. A mask is a string comprised of special characters which are used to validate data entry: A question mark (?) allows any character, the letter A allows only alphabetical characters, the number 9 allows digits, and an X allows alphanumeric characters. Any other character is a literal and is itself embedded in the input.

For example, to validate a three-digit age, you could do the following:

<cfinput type="text"
         name="age"
         maxlength="3"
         mask="999">

The mask filter "999" would only accept digits. If a user entered anything other than a digit, the tag would simply ignore that input. Similarly, to validate a US-style phone number in the format (123) 456-7890, you could use the following code:

<cfinput type="text"
         name="phone"
         maxlength="13"
         mask="(999) 999-9999">

Again, the mask attribute value allows only digits, but inserts the other characters automatically.

For a Canadian postal code you could use the following:

<cfinput type="text"
         name="postcode"
         maxlength="7"
         mask="A9A 9A9">

You get the idea. Input masking does not negate the need for input validation, but it does make for a far better user experience.

Page 2 of 8

Previous Page

Next Page