cfinput

Description

Used within the cfform tag, to place input controls that support input validation on a form.

Syntax

<cfinput 
name = "name"
type = "input type"
label = "text"
style = "style specification"
required = "yes" or "no"
mask = "masking pattern"
validate = "data type"
validateAt= one or more of "onBlur", "onServer", "onSubmit"
message = "text"
range = "min_value, max_value"
maxlength = "number"
pattern = "regexp"
onValidate = "script name"
onError = "script name"
size = "integer"
value = "initial value"
bind = "bind expression"
checked
disabled = "true" or "false" or no attribute value
src = "image URL"
onKeyUp = "JavaScript or ActionScript"
onKeyDown = "JavaScript or ActionScript"
onMouseUp = "JavaScript or ActionScript"
onMouseDown = "JavaScript or ActionScript"
onChange = "JavaScript or ActionScript"
onClick = "JavaScript or ActionScript"
firstDayOfWeek = "day name"
dayNames = "days-of-the-week labels"
monthNames = "month labels"
enabled = "Yes" or "No"
visible = "Yes" or "No"
toolTip = "Tip text"
height = "number of pixels"
width = "number of pixels"
>

History

ColdFusion MX 7:

Added support for button, file, hidden, image, reset, and submit controls.
Added support for generating Flash and XML controls (specified in the cfform tag).
Added datefield type (Flash forms only) and the supporting daynames and monthnames attributes.
Added bind, enabled, height, label, tooltip, visible, and width attributes for use in Flash forms.
Added support for onBlur and onServer validation, including the validateAt attribute.
Added USdate, range, boolean, email, URL, uuid, guid, maxlength, noblanks, and submitOnce validation attribute values.
Added support for preventing multiple submissions.
Added the mask attribute.
Deprecated the passthrough attribute. The tag now supports all HTML input tag attributes directly.

ColdFusion MX: Changed the cfform tag preserveData attribute behavior: if it is set to True, ColdFusion checks radio and check box values only if their value matches the posted value for the control. (In earlier releases, if the posted value did not match any of the cfinput check boxes or radio buttons for the control, the checked attribute was used.

Attributes

The following table lists attributes that ColdFusion uses directly. The tag also supports all HTML form tag attributes that are not on this list, and passes them directly to the browser.

Note: Attributes that are not marked as supported in XML are not handled by the skins provided with ColdFusion MX. They are, however, included in the generated XML.

Attribute	Req/Opt; Formats	Default	Description
name	Required; All		Name for form input element.
type	Optional; All	text	The input control type to create: button: push button. checkbox: check box. file: file selector; not supported in Flash. hidden: invisible control. image: clickable button with an image. password: password entry control; hides input values. radio: radio button. reset: form reset button. submit: form submission button. text: text entry box. datefield: Flash only; date entry field with an expanding calendar for selecting dates.
label	Optional; Flash and XML		Label to put next to the control on a Flash form. Not used for button, hidden, image, reset, or submit types.
style	Optional; All		In HTML or XML format, ColdFusion passes the style attribute to the browser or XML. In Flash format, must be a style specification in CSS format. For detailed information on specifying Flash styles, see Creating Forms in Macromedia Flash in ColdFusion MX Developer's Guide. In XML format, ColdFusion passes the style attribute to the XML.
required	Optional; All	no	yes: the field must contain data. no: allows an empty field.
mask	Optional; Flash and HTML		A mask pattern that controls the character pattern that users can enter, or that the form sends to ColdFusion. HTML and Flash: For tags with `type="text"`. Mask characters and the corresponding valid input characters are: A = [A-Za-z] X = [A-Za-z0-9] 9 = [0-9] ? = Any character All other characters = insert the literal character Flash only: For tags with `type="datefield"`. ColdFusion uses the mask pattern to format the selected date. Mask characters are: D = day; can use 0-2 mask characters. M = month; can use 0-4 mask characters. Y = year; can use 0, 2, or 4 characters. E = day in week; can use 0-4 characters. For more information, see Masking input data in Usage.
validate	Optional; All		The type or types of validation to do. Available validation types and algorithms depend on the format. For details, see Usage.
validateAt	Optional; All	onSubmit	How to do the validation; one or more of the following: onSubmit onServer onBlur onBlur and onSubmit are identical in Flash forms. For multiple values, use a comma-delimited list. For details, see Usage.
message	Optional; All		Message text to display if validation fails.
range	Optional; All		Minimum and maximum allowed numeric values. ColdFusion uses this attribute only if you specify range in the `validate` attribute. If you specify a single number or a single number followed by a comma, it is treated as a minimum, with no maximum. If you specify a comma followed by a number, the maximum is set to the specified number, with no minimum.
maxLength	Optional; All		Maximum length of text entered, if `type` `=` `"Text"` or `"password"`. For complete length validation, specify maxLength validation in a `validate` attribute; otherwise, this attribute prevents users from typing beyond the specified length, but does not prevent them from pasting in a longer value.
pattern	Required if `validate = "regex";` HTML and XML format only		JavaScript regular expression pattern to validate input. ColdFusion uses this attribute only if you specify regex in the `validate` attribute. Omit leading and trailing slashes. For examples and syntax, see Building Dynamic Forms with cfform Tags in ColdFusion MX Developer's Guide.
onValidate	Optional; HTML and XML only		Custom JavaScript function to validate user input. The form object, input object, and input object values are passed to the routine, which should return True if validation succeeds, and False otherwise. If used, the `validate` attribute is ignored.
onError	Optional; HTML and XML only		Custom JavaScript function to execute if validation fails.
size	Optional; All		Size of input control. Ignored, if `type` `=` `"radio"` or `"checkbox"`. If specified in a Flash form, ColdFusion sets the control width pixel value to 10 times the specified size and ignores the `width` attribute
value	depends on type setting; All		HTML: corresponds to the HTML value attribute. Its use depends on control type. Flash: optional; specifies text for button type inputs: button, submit, and image.
bind	Optional; Flash only		A Flash bind expression that populates the field with information from other form fields. For details, see Usage.
checked	Optional; All	False	Selects a radio or checkbox control: True False
disabled	Optional; All	not disabled	Disables user input, making the control read-only. To disable input, specify disabled without an attribute or `disabled="Yes"` (or any ColdFusion positive Boolean value, such as True). To enable input, omit the attribute or specify `disabled="No"` (or any ColdFusion negative Boolean value, such as False).
src	Optional; Flash and HTML		Applies to Flash button, reset, submit, and image types, and the HTML image type. URL of an image to use on the button. Flash does not support GIF images.
onKeyUp	Optional; All		JavaScript (HTML/XML) or ActionScript (Flash) to run when the user releases a keyboard key in the control.
onKeyDown	Optional; All		JavaScript (HTML/XML) or ActionScript (Flash) ActionScript to run when the user presses a keyboard key in the control.
onMouseUp	Optional; All		JavaScript (HTML/XML) or ActionScript (Flash) to run when the user presses a mouse button in the control.
onMouseDown	Optional; All		JavaScript (HTML/XML) or ActionScript (Flash) to run when the user releases a mouse button in the control.
onChange	Optional; All		JavaScript (HTML/XML) or ActionScript (Flash) to run when the control changes due to user action. In Flash, applies to datefield, password, and text types only.
onClick	Optional; All		JavaScript (HTML/XML) or ActionScript (Flash) to run when the user clicks the control. In Flash, applies to button, checkbox, image, radio, reset, and submit types only.
dayNames	Optional; All	S, M, T, W, Th, F, S	Applies to `datefield` type only. A comma-delimited list that sets the names of the weekdays displayed in the calendar. Sunday is the first day; the rest of the weekday names follow in the normal order.
firstDayOfWeek	Optional; All	0	Applies to `datefield` type only. Integer in the range 0-6 specifying the first day of the week in the calendar: 0 indicates Sunday; 6 indicates Saturday.
monthNames	Optional; All	January, February, March, April, May, June, July, August, September, October, November, December	Applies to `datefield` type only. A comma-delimited list of the month names that are displayed at the top of the calendar.
enabled	Optional; Flash	Yes	Boolean value specifying whether the control is enabled. A disabled control appears in light gray. The inverse of the `disabled` attribute.
visible	Optional; Flash	Yes	Boolean value specifying whether to show the control. Space that would be occupied by an invisible control is blank.
tooltip	Optional; Flash		Text to display when the mouse pointer hovers over the control.
height	Optional; see Description		Applies to most Flash types, HTML image type on some browsers. The height of the control, in pixels. The displayed height might be less than the specified size.
width	Optional; see Description		Applies to most Flash types, HTML image type on some browsers. The width of the control, in pixels. For Flash forms, ColdFusion ignores this attribute if you also specify a `size` attribute value.

<em>

Note: Attributes that are marked as not supported in XML are not handled by the skins provided with ColdFusion MX. They are, however, included in the generated XML.

Usage

For this tag to work properly. the browser must be JavaScript-enabled.

If the cfform preserveData attribute is true and the form posts back to the same page, the posted value of the cfinput control is used, instead of its Value or Checked attribute.

You can use the keyboard to access and select dates from a datefield Flash input: press Tab to go to the field and press the Spacebar to open the menu. Use the Up, Down, Left, and Right Arrow keys to change the selected date. Use the Home and End keys to reach the first and last enabled date in a month, respectively. Use the Page Up and Page Down keys to reach the previous and next month, respectively.

Note: To clear a datefield entry, select the field to open the menu, and click the selected date.

For more information, see cfform. For information on using JavaScript regular expressions with this tag, see Building Dynamic Forms with cfform Tags in ColdFusion MX Developer's Guide.

Validation

The following sections describe how to do validation in cfinput tags.

Validation methods ColdFusion provides four methods of validation of cfinput text and password fields.

You can specify one or a combination of the following in the validateAt attribute:

onSubmit The form page on the browser includes JavaScript functions that perform validation before the form is submitted to the server. In Flash format forms, this option is identical to onBlur.
onBlur In HTML format the form page on the browser includes JavaScript functions that perform validation when the field loses the focus. In Flash format, the attribute is equivalent to onSubmit. OnBlur validation uses the same algorithms as onSubmit validation. OnBlur validation was added in ColdFusion MX 7.
onServer ColdFusion performs the validation on the server. Some onServer algorithms vary from the onSubmit algorithms. OnServer Date and Time validation allow more patterns than onSubmit validation. OnServer validation was added in ColdFusion MX 7, and automatically generates hidden fields to support the validation.

You can also omit a validate attribute and specify the type of validation for the field in a separate hidden form field. This form of validation is equivalent to onServer validation, but it allows you to specify separate messages for each validation that you do on the field. It is backward compatible with previous ColdFusion releases. For more information on hidden form field validation, see cfform and Validating form data using hidden fields in Validating form data using hidden fields in ColdFusion MX Developer's Guide.

validation types You can use the following values in the validate attribute to specify input validation for all validation methods. Most attributes apply only to password or text fields. You can specify multiple validation types in a comma-delimited list, but only some combinations are meaningful.

Type	Description
date	If `validateAt="onServer"`, allows any date format that returns True in the `IsDate` function; otherwise, same as USdate.
USdate	A US date of the format mm/dd/yy mm-dd-yy or mm.dd.yy, with 1-2 digit days and months, 1-4 digit years.
eurodate	A date of the format dd/mm/yy, with 1-2 digit days and months, 1-4 digit years.. The format can use /, -, or . characters as delimiters.
time	Time format hh:mm:ss
float or numeric	A number; allows integers.
integer	An integer.
range	A numeric range.
boolean	A value that can be converted to a Boolean value: Yes, No, True, False, or a number.
telephone	Standard U.S. telephone formats. Allows an initial 1 long-distance designator and up to 5-digit extensions, optionally starting with x.
zipcode	U.S. 5- or 9-digit ZIP code format #####-####. The separator can be a hyphen (-) or a space.
creditcard	Strips blanks and dashes; verifies number using mod10 algorithm. Number must have 13-16 digits.
ssn or social_security_number	US. Social Security number format, ###-##-####. The separator can be a hyphen (-) or a space.
email	A valid e-mail address of the form [email protected]. ColdFusion validates the format only; it does not check that entry is a valid active e-mail address.
URL	A valid URL pattern; supports http, https, ftp file, mailto, and news URLs.
guid	A unique identifier that follows the Microsoft/DCE format, xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx, where x is a hexadecimal number.
uuid	A universally unique identifier (UUID) that follows the ColdFusion format, xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxx, where x is a hexadecimal number.
maxlength	Limits the input to a maximum number of characters.
noblanks	Does not allow fields that consist only of blanks.
regex or regular_expression	Matches input against the `pattern` attribute. Valid in HTML and XML format only; ignored in Flash format.
SubmitOnce	Used only with submit and image types; prevents the user from submitting the same form multiple times before until the next page loads (for example, submitting an order a second time before getting the first order confirmation). Valid in HTML and XML format only; ignored in Flash format.

Validation differences The preceding table describes the general validation behavior. The underlying validation code must differ depending on the validation method and the form type. As a result, the algorithms used vary in some instances, including the following:

The validation algorithms used for date/time values varies between onSubmit/OnBlur and OnServer.
The algorithms used for onSubmit/OnBlur validation in Flash vary from those used for HTML/XML format, and generally follow simpler rules.

The table describes the onSubmit/OnBlur behavior in HTML format. For detailed information on the OnServer validation algorithms, see Data validation types in Data validation types in ColdFusion MX Developer's Guide.

For more information on validation, including discussions of the advantages and disadvantages of different validation types, see Validating Data in ColdFusion MX Developer's Guide.

Masking input data

The mask attribute controls the format of data that can be entered into a field. You can combine masking and validation on a field.

In HTML and Flash form format the mask can control the format of data entered into a text field.
In Flash format, the mask can also control the format of the date chosen using the datefield input control.

In text fields, ColdFusion automatically inserts any literal mask characters, such as - characters in telephone numbers. Users type only the variable part of the field.

The following pattern enforces entry of a part number of the format EB-1234-c1-098765, where the user starts the entry by typing the first numeric character, such as 3. ColdFusion fills in the preceding EA prefix and all - characters. The user must enters four numbers, followed by two alphanumeric characters, followed by six numbers.

<cfinput type="text" name="newPart" mask="EB-9999-XX-999999" />

Note: To force a pattern to be all-uppercase or all-lowercase, use the ColdFusion UCase or LCase functions in the action page.

For tags with type="datefield" (and cfcalendar tags), the number of pattern characters determines the format of the output, as follows:

Mask	Pattern
D	Single- or double-digit day of month, such as 1 or 28
DD	Double-digit day of month, such as 01 or 28
M	Single- or double-digit month, such as 1 or 12
MM	Double-digit month, such as 01 or 12
MMM	Abbreviated month name, such as Jan or Dec
MMMM	Full month name, such as January or December
YY	Two-character year, such as 05
YYYY	Four-character year, such as 2005
E	Single-digit day of week, such as 1 or 7
EEE	Abbreviated day of week name, such as Mon or Sun
EEEE	Full month day of week name, such as Monday or Sunday

The following pattern specifies that the Flash forms sends the date selected using a datefield input control to ColdFusion as text in the format 04/29/2004:

<cfinput name="startDate" type="datefield" label="date:" mask="mm/dd/yyyy"/>

Flash form data binding

The bind attribute lets you populate form fields using the contents of other form fields. To specify text from another field in a cftextarea bind attribute, use the following format:

{sourceTagName.text}

For example, the following line uses the values from the firstName and lastName fields to construct an email address. (The user can change or replace this value with a typed entry.)

         <cfinput type="text" name="email" label="email"
            bind="{firstName.text}.{lastName.text}@mm.com">

Example

<!--- This example shows the use of cfinput within a cfform to ensure simple
validation of text items. --->
<cfform action = "cfinput.cfm">
<!--- Phone number validation. --->
Phone Number Validation (enter a properly formatted phone number): <br>
<cfinput 
   type = "Text" name = "MyPhone" 
   message = "Enter telephone number, formatted xxx-xxx-xxxx (e.g. 617-761-2000)"
   validate = "telephone" required = "yes">
   <font size = -1 color = red>Required</font>
<!--- Zip code validation. --->
<p>Zip Code Validation (enter a properly formatted zip code):<br>
<cfinput 
   type = "Text" name = "MyZip" 
   message = "Enter zip code, formatted xxxxx or xxxxx-xxxx" 
   validate = "zipcode" required = "yes">
   <font size = -1 color = red>Required</font>
<!--- Range validation. --->
<p>Range Validation (enter an integer from 1 to 5): <br>
<cfinput 
   type = "Text" name = "MyRange" range = "1,5" 
   message = "You must enter an integer from 1 to 5" 
   validate = "integer" required = "no">
<!--- Date validation. --->
<p>Date Validation (enter a properly formatted date):<br>
<cfinput 
   type = "Text" name = "MyDate" 
   message = "Enter a correctly formatted date (dd/mm/yy)" 
   validate = "date" required = "no">
<input 
   type = "Submit" name = "" 
   value = "send my information">
</cfform>

View comments in LiveDocs