-
Notifications
You must be signed in to change notification settings - Fork 9
Form
I display an XHTML 1.0 Strict form based upon the Uni-Form markup
Step 1. Load the uform tags
<cfimport taglib="/tags/forms/cfUniForm" prefix="uform" />
Step 2: Open the form
<uform:form action="myAction.cfm" method="post" id="myForm">
Step 3: Add the form elements
For more info on Step 3, see the following tags:
- fieldset.cfm
- field.cfm
- option.cfm
- checkbox.cfm
- radio.cfm
- countryCodes.cfm
- states-us.cfm
- states-can.cfm
Step 4: Close the form
</uform:form>
<cfimport taglib="/tags/forms/cfUniForm" prefix="uform" />
<uform:form action="myAction.cfm" method="post" id="myForm">
<uform:fieldset legend="Required Fields" class="inlineLabels">
<uform:field label="Email Address" name="emailAddress" isRequired="true" type="text" value="" hint="Note: Your email is your username. Use a valid email address." />
<uform:field label="Choose Password" name="password" isRequired="true" type="password" value="" />
<uform:field label="Re-enter Password" name="password2" isRequired="true" type="password" value="" />
</uform:fieldset>
</uform:form>
@action Required (string)
The path to be supplied to the action="" attribute of the form tag
@id Required (string)
The form ID (goes into the id="" attribute of the form tag)
@addJStoHead Optional (boolean) [true]
Indicates whether or not cfUniForm should add the JS to the
of the document. If 'false', it will be added immediately after the form markup.
@cancelAction Optional (string) [empty string]
The URL that JavaScript will direct the browser to if the 'Cancel' button is clicked. Can be a full URL (e.g. 'http://www.domain.com/index.cfm') or a file (e.g. 'index.cfm'). If not provided, or is an empty string, the form will be submitted normally.
@cancelName Optional (string) ['cancelButton']
The name and id for the cancel button.
@cancelValue Optional (string) ['Cancel']
The text to show on the 'Cancel' button.
@class Optional (string) [empty string]
Additional class(es) to add to the form's class attribute.
@configDateUI Optional (boolean) [false]
Indicates whether or not to run configuration routines for the jQuery UI datepicker plugin.
@configForm Optional (boolean) [false]
Indicates whether or not cfUniForm should call jQuery().uniform() on this specific form. Useful if you have all of the assets already loaded and are loading the form into the page via ajax.
@configMaskUI Optional (boolean) [false]
Indicates whether or not to run configuration routines for the jQuery masked input plugin.
@configRatingUI Optional (boolean) [false]
Indicates whether or not to run configuration routines for the jQuery star-ratings plugin.
@configTextareaResize Optional (boolean) [false]
Indicates whether or not to run configuration routines for the jQuery PrettyComments plugin.
@configTimeUI Optional (boolean) [false]
Indicates whether or not to run configuration routines for the jQuery time entry plugin.
@configValidation Optional (boolean) [false]
Indicates whether or not to run configuration routines for the jQuery form validation plugin.
@cssLoadVar Optional (string)
The name of the variable that should be used to return the CSS load HTML to the caller. (e.g. all of the load strings) If provided, cfUniForm will set the variable in the calling page rather than adding them to the document
.
@dateSetup Optional (any) [empty string]
Commands to load for the jQuery datepick plugin. Can be provided as as a string OR a struct. If it is a string, it will be loaded as-is. If it is a struct, it will be looped over and a string of key-value pairs will be created.
@errors Optional (struct|array)
A struct or an array of validation error messages to display. If passing a struct, each key should match a field name on the form, with its value being the error message.
myErrors = structNew();
myErrors.userName = "The User Name is invalid.";
If passing an array, each index of the array must contain a struct with two keys:
- property The 'property' key should match the offending field name on the form.
- message The 'message' key is the error message that will be displayed.
myErrors = arrayNew(1);
struct = structNew();
struct.property = "UserName";
struct.message = "The User Name is invalid.";
arrayAppend(myErrors, struct);
An exception will be thrown if the array does not meet the above specification.
@errorListType Optional (string) ['ul']
The type of (HTML) list to use in displaying validation errors. Acceptable values are: ol, ul.
@errorMessage Optional (string) ["The following errors were detected in your form. Please fix the offending fields and re-submit."]
The message to display above the error messages.
@errorMessageInlinePlacement Optional (string) [top]
Indicates whether to display the error message above the form field or below it. UniForm spec is "top". Valid options are: top (default), bottom.
@errorMessagePlacement Optional (string) [both]
Indicates where to display the error messages (if any). Valid options are: top, inline, both (default), none.
@errorTitle Optional (string) ["Ooooops! Invalid Fields!"]
The title to display above the error messages.
@isDisabled Optional (boolean) [false]
Whether to set the entire form to disabled.
@jsConfigVar Optional (string)
The name of the variable that should be used to return the jsConfig to the caller. If not provided, the jsConfig will be added automatically. (Default behavior.) If provided, cfUniForm will set the variable in the calling page.
@jsLoadVar Optional (string)
The name of the variable that should be used to return the JavaScript load HTML to the caller. e.g. all of the <script src="/path/to/script.js"></script> load strings) If provided, cfUniForm will set the variable in the calling page. NOTE: Providing this variable will completely override @addJStoHead. That is, @addJStoHead will be ignored.
@loadDateUI Optional (boolean) [false]
Indicates whether or not to load the prerequisite files for the jQuery UI datepicker plugin.
@loadDefaultCSS Optional (boolean) [true]
Indicates whether or not to load the Uni-Form CSS files.
@loadDefaultJS Optional (boolean) [true]
Indicates whether or not to load the Uni-Form JS files.
@loadjQuery Optional (boolean) [false]
Indicates whether or not to load the jQuery core library.
@loadMaskUI Optional (boolean) [false]
Indicates whether or not to load the prerequisite files for the jQuery masked input plugin.
@loadRatingUI Optional (boolean) [false]
Indicates whether or not to load the prerequisite files for the jQuery star-ratings plugin.
@loadTextareaResize Optional (boolean) [false]
Indicates whether or not to load the prerequisite files for the jQuery PrettyComments plugin.
@loadTimeUI Optional (boolean) [false]
Indicates whether or not to load the prerequisite files for the jQuery time entry plugin.
@loadValidation Optional (boolean) [false]
Indicates whether or not to load the prerequisite files for the jQuery form validation plugin.
@method Optional (string) [post]
The form method; either 'post' or 'get'.
@pathConfig Optional (struct) [#structNew()#]
Used to provide path configuration for the various integrated CSS and JS libraries.
@resetValue Optional (string) ['Reset']
The text to show on the 'Reset' button.
@showCancel Optional (boolean) [true]
Indicates whether or not to show a 'Cancel' button.
@showReset Optional (boolean) [false]
Indicates whether or not to show a 'Reset' button.
@submit2name Optional (string)
The name/id of a second submit button. If not provided (or if an empty string is provided), a second submit button will not be displayed.
@submit2placement Optional (string) ['before']
Indicates whether the second submit button should appear on the far left, immediately before or immediately after the standard one. Valid values are: before ,after ,left.
@submit2value Optional (string)
The text to show on the second submit button.
@submitName Optional (string) ['submitButton']
Name for the submit button.
@submitValue Optional (string) ['Submit']
The text to show on the 'Submit' button.
@textareaMaxHeight Optional (numeric) [500]
Value to use for MaxHeight parameter of AutoResizable textarea.
@textareaSetup Optional (any) [empty string]
Commands to load for the jQuery textareaResize (prettyComments) plugin. Can be provided as a string OR a struct. If it is a string, it will be loaded as-is. If it is a struct, it will be looped over and a string of key-value pairs will be created.
@timeSetup Optional (any) [empty string]
Commands to load for the jQuery time entry plugin. Can be provided as a string OR a struct. If it is a string, it will be loaded as-is. If it is a struct, it will be looped over and a string of key-value.
@validationSetup Optional (any) [empty string]
Commands to load for the jQuery validation plugin. Can be provided as a string OR a struct. If it is a string, it will be loaded as-is. If it is a struct, it will be looped over and a string of key-value pairs will be created.
@VT Optional (any) [empty string]
If you want to use VT in conjunction with your cfUniForm-powered form, provide the ValidateThis object to this attribute (e.g. VT="#application.ValidateThis#").
@VTcontext Optional (string) [empty string]
If you want to use VT in conjunction with your cfUniForm-powered form, provide the validation context to this attribute (e.g. VTcontet="Registration").
@VTlocale Optional (string) [empty string]
If you want to use VT in conjunction with your cfUniForm-powered form, provide the locale to this attribute (e.g. VTcontet="EN").
@VTtarget Optional (any) [empty string]
If you want to use VT in conjunction with your cfUniForm-powered form, provide the target object to this attribute; that is, the object that VT should be validating (e.g. VTtarget="#myObject#").
@config
DEPRECATED in v4.0. Use 'pathConfig' instead.