Validating Form Fields

Data entered into HTML forms must usually be validated so ensure that required values are specified and that the correct data types are used. There are two basic types of validation employed in HTML form development:

• Client-side validation occurs within the Web browser, usually before form submission. This form of validation requires that client-side code (usually JavaScript) be executed within the browser.

• Server-side validation occurs after the form has been submitted. This form of validation requires server-side code (CFML code in our case).

Client-side validation is primarily used to create a better user experience, whereas server-side validation is what actually enforces data integrity. As such, ideally, both forms of validation should be used.

The simplest way to perform validation is to have ColdFusion do all the hard work for you. The <cfinput> tag (and the CFML equivalents of all of the HTML form tags) support the use of additional attributes that instruct ColdFusion to generate validation code for you automatically. Table 9.1 lists these attributes.

Table 9.1. Form Field Validation Attributes

ATTRIBUTE	DESCRIPTION
Mask	Input mask (only used with client-side validation)
Maxlength	Maximum number of characters allowed (supported in text fields in HTML, CFML adds support for <textarea> fields too)
Message	Message to be displayed if validation fails
Pattern	Regular expression validation pattern
Range	Range of valid values
Required	Whether or not the field is required
Validate	Data validation type (types are listed in Table 9.2)
ValidateAt	Where to validate, onBlur for immediate client-side validation, onServer for server-side validation, onSubmit for pre-submission client-side validation

TIP

To perform both client-side and server0side validation, pass multiple values (comma delimited) to validateAt.

validate is the type of data to be validated, as seen in Table 9.2

Table 9.2. Data Validation Types

TYPE	DESCRIPTION
Boolean	Boolean values (yes, no, true, false, number)
Creditcard	Credit card number (mod10)
Date	US formatted date
Email	Well formed e-mail address
Eurodate	European formatted date
Float	A number (same as numeric)
Guid	Microsoft/DCE format unique identifier
Integer	Integer value
Maxlength	Check for maxlength value
Noblanks	Allow no blank values
Numeric	A number (same as float)
Range	Range of values (specified in range attribute)
Regex	Regular expression pattern (same as regular_expression)
regular_expression	Regular expression pattern (same as regex)
social_secutity_number	US social security number (same as ssn)
Ssn	US social security number (same as social_secutity_number)
submitOnce	Only allow a single form submission (only used with type="submit" and type="image")
Telephone	US format phone number
Time	Time in hh:mm:ss format
url	Well formed URL
Usdate	US formatted date
Uuid	Unique identifier
Zipcode	US format zip code

To use ColdFusion generated validation, the <cfform> family of tags is used, as seen in the following example:

 <cfform action="actionpage.cfm"         method="post"> id: <cfinput type="text"          name="id"          message="You must enter your id to proceed."          required="yes"          validate="integer"          validateat="onsubmit,onserver"> <br> <input type="submit"> </cfform> 

In this example a single field is defined as required and as being an integer. Validation occurs both client-side and server-side, and an error message (to be displayed if validation fails) is specified.

CAUTION

ColdFusion generated server-side validation is not foolproof. It works by embedding hidden form fields containing validation rules within the form. This means that a user could possibly edit out those rules so as to submit the form without them. Best practices dictate that all passed data be manually validated when received (<cfparam> is ideally suited for this task).