Web Design Files > Advanced Form

Advanced Form

The Advanced Form package was created based on the <cfform>, <cfformgroup>, <cfinput>, <cftextarea> and <cfselect> tags from Adobe/Macromedia's Coldfusion which are designed to make creating forms that bit easier. The <cfform> tags make it simple to implement client and server side validation with no knowledge of javascript which makes them appealing, however but the methods for doing so are quite ineffective. For example the <cfform> tag's server side validation relies on hidden form fields which are not that secure and for client side the javascript base file included is in excess of 20kb, not to mention the verbose specific validation code that is also generated which can be huge. Additionally the only error message options available are alerts - there is no way to display the messages inline. Not only that but there is no way to exclude the javascript validation files either - they are included automatically when using <cfform> even if you don't want to validate anything.

These issues prompted the re-creation of this group of tags, with the added inclusion of semantic css/xhtml-strict markup created automatically, formatting options, hidden field server side validation, ability to ensure that the form is being submitted from your server (to help prevent xss), server side validation based on data types (int/no blanks/email/date/credit card/etc) or custom regular expressions and client side validation with inline (onblur, onsubmit) or alert messages all completely customizable via css (javascript base file only 6.0kb compressed), that also validates to the same server side rules and is automatically generated all with cross browser support.

Click on the buttons bellow to see some examples in action, the Coldfusion example shows client + server side validation and is created with <cf_adv_form> tags, while the HTML example shows how to use the client side validation as a separate feature for non Coldfusion users. To see Coldfusion server side validation in action turn Javascript off in your browser and submit the form.

Browser Support

Internet Explorer 6, Internet Explorer 7, Firefox 1.5, Opera 8, Safari 1.2 (Mac), Firefox 1.5 (Mac) - all tested, should also work in most other browsers.

Download

Click here to download the latest version (1.10)

Examples

Click to see <cf_ad_form> / validation examples

Comments

Any feedback? Click here to comment!

Usage - Tags

<cf_adv_form>
@ param [action] (String) optional attribute of where to send the form on submission - defaults to the current page
@ param [id] (String) optional form id
@ param [inputClass] (String) optional string that matches a css class name that should be applied to all inputs within the form
@ param [class] (String) optional form class name
@ param [method] (String) form submission method either post or get - defaults to post
@ param [serverValidation] (Boolean) should hidden fields be included for server side validation - defaults to true
@ param [multipart] (Boolean) is the form's enctype multipart/form-data - defaults to false
@ param [errors] (variableName) a query object to be passed to the form that contains errors - defaults to NULL
@ param [validationMessage] (String) an overall message for server side validation errors - defaults to: The following fields contain errors or are incomplete please fix these and resubmit:
@ return (Void) returns nothing

Example

<cf_adv_form action="page.cfm" method="post" id="myForm" inputClass="field" errors="errors">
  ...

</cf_adv_form>

<cf_adv_formgroup>
@ param [type] (String) formatting type to be used (horizontal/h,vertical/v,indent,group,fieldset/fs)
@ param [label] (String) optional fieldset legend text or horizontal/vertical aligned element's label
@ param [title] (String) optional title text
@ return (Void) returns nothing

Example

<cf_adv_form inputClass="field" errors="errors">
  <cf_adv_formgroup type="fieldset" label="Section 1">
    <cf_adv_formgroup type="horizontal" label="Gender">
      <cf_adv_input fieldname="Gender" value="Male" label="Male" type="radio" />
      <cf_adv_input fieldname="Gender" value="Female" label="Female" type="radio" />  
    </cf_adv_formgroup>   
    ...
  </cf_adv_formgroup>
</cf_adv_form>

<cf_adv_input>
@ param [type] (String) input type - defaults to text (valid types button,checkbox,file,hidden,
image,password,radio,submit,reset,text)
@ param fieldName (String) the name of the field
@ param [id] (String) field's id - defaults to the field's name
@ param [value] (String) initial value - defaults to NULL
@ param [label] (String) a text label for the field - defaults to the field's name
@ param [useLabel] (Boolean) should a text label be used - defaults to true
@ param [inputClass] (String) optional css class name the field should have
@ param [labelClass] (String) optional css class name the field's label should have
@ param [useDiv] (Boolean) should a div tag be used to wrap the field for formatting - defaults to true
@ param [size] (Numeric) a character size for the field (file,password,text only) - defaults to 0 and is excluded if 0
@ param [maxLength] (Numeric) a maxlength for the field (file,password,text only) - defaults to 0 and is excluded if 0
@ param [src] (String) path to image source for image types only
@ param [checked] (Boolean) is the field checked by default (radio,checkbox only) - defaults to false
@ param [disabled] (Boolean) is the field disabled - defaults to false
@ param [idSpaceChar] (String) optional character(s) used in place of spaces in the field's id - defaults to ""
@ param [serverValidate] (Boolean) overwrites the server validate setting on the form tag for hidden validation - defaults to true
@ param [required] (Boolean) is the field optional or required - defaults to true
@ return (Void) returns nothing

Example

<cf_adv_form inputClass="field" errors="errors">
  <cf_adv_formgroup type="fieldset" label="Section 1">
    <cf_adv_input fieldname="Name" label="Name" type="text" />
    <cf_adv_input fieldname="Age" label="Age" type="text" />
    <cf_adv_formgroup type="horizontal" label="Gender">
      <cf_adv_input fieldname="Gender" value="Male" label="Male" type="radio" />
      <cf_adv_input fieldname="Gender" value="Female" label="Female" type="radio" />  
    </cf_adv_formgroup>   
    ...
  </cf_adv_formgroup>
</cf_adv_form>

<cf_adv_select>
@ param fieldName (String) the name of the field
@ param [id] (String) field's id - defaults to the field's name
@ param [label] (String) a text label for the field - defaults to the field's name
@ param [useLabel] (Boolean) should a text label be used - defaults to true
@ param [inputClass] (String) optional css class name the field should have
@ param [labelClass] (String) optional css class name the field's label should have
@ param [size] (Numeric) a character size for the field (file,password,text only) - defaults to 0 and is excluded if 0
@ param [multiple] (Boolean) can users select multiple values - defaults to false
@ param [disabled] (Boolean) is the field disabled - defaults to false
@ param [query] (variableName) a query object to be outputted in the select by default - defaults to NULL
@ param [value] (variableName) a valid column in the query to be used for each option's text - defaults to NULL
@ param [display] (variableName) a valid column in the query to be used for each option's value - defaults to NULL
@ param [idSpaceChar] (String) optional character(s) used in place of spaces in the field's id - defaults to ""
@ param [serverValidate] (Boolean) overwrites the server validate setting on the form tag for hidden validation - defaults to true
@ param [required] (Boolean) is the field optional or required - defaults to true
@ return (Void) returns nothing

Example

<cf_adv_form inputClass="field" errors="errors">
  <cf_adv_formgroup type="fieldset" label="Section 1">
    <cf_adv_select fieldname="Color" query="colorsQuery" value="key" display="color" size="4" multiple="true" selected="3,1" servervalidate="false">
      <option value="">Choose your favourite color(s)</option>  
    </cf_ad_select>    
    <cf_adv_select fieldname="Age" />
     <option value="">-----</option>
     <option value="10-18">10-18</option>
     <option value="18-30">18-30</option>  
     <option value="30+">30+</option>  
    </cf_ad_select>
    ...
  </cf_adv_formgroup>
</cf_adv_form>

<cf_adv_textarea>
@ param fieldName (String) the name of the field
@ param [id] (String) field's id - defaults to the field's name
@ param [value] (String) initial value - defaults to NULL
@ param [label] (String) a text label for the field - defaults to the field's name
@ param [inputClass] (String) optional css class name the field should have
@ param [labelClass] (String) optional css class name the field's label should have
@ param [rows] (Numeric) row size for the field - defaults to 3
@ param [cols] (Numeric) cols size for the field - defaults to 40
@ param [idSpaceChar] (String) optional character(s) used in place of spaces in the field's id - defaults to ""
@ param [serverValidate] (Boolean) overwrites the server validate setting on the form tag for hidden validation - defaults to true
@ param [required] (Boolean) is the field optional or required - defaults to true
@ return (Void) returns nothing

Example

<cf_adv_form inputClass="field" errors="errors">
  <cf_adv_formgroup type="fieldset" label="Section 1">
    <cf_adv_texarea fieldname="Data" label="Data" value="Please enter" rows="5" cols="50" />  
    <cf_adv_texarea fieldname="Address" label="Your Address">Default Text...</cf_adv_textarea>
    ...
  </cf_adv_formgroup>
</cf_adv_form>

<cf_adv_validation>
@ param validationSet (Array) an array containing validation data to generate a javascript equivalent.
@ param [useValidationCssFile] (Boolean) include a css file just for form/validation data - defaults to true
@ param [jsValidationFilePath] (String) a path the generic js validation file - defaults to "assets/js/generic_validation.js"
@ param [cssValidationFilePath] (String) optional path the generic css validation file (if used) - defaults to "assets/js/form_validation.css"
@ return (Void) returns nothing

Example

<head>
<title></title>
<cf_adv_validation validationset="#validationSet#" jsvalidationfilepath="generic_validation.js" 
cssvalidationfilepath="form_validation.css" usevalidationcssfile="true" />
...
</head>

Usage - CFC

addValidation(fieldName, errorMessage [, type, customRegExp, optional])
@ param fieldName (String) the name of the field to validate
@ param errorMessage (String) an error message to display to the user when validation doesn't meet criteria
@ param [type] (String) optional type to validate (valid types are text (no blanks),email,integer/numeric,alphanumeric,
float,money,phone(australian),usphone,eurodate,usdate,date,card/creditcard,checkbox/radio/select,
uszip,ussocialsecurity/ssn,ipaddress,url,jpg,file,custom) - defaults to text
@ param [customRegExp] (String) if the type is custom, a valid regular expression if an invalid is provided the field is skipped
@ param [optional] (Boolean) is the field optional ie if left empty is fine but if it has a value is checked - defaults to false
@ return (Void) returns nothing

Example

vo = createObject("component","adv_validation");
vo.addValidation("SSN","Please enter your SSN","custom","\d{3}-\d{2}-\d{4}",true);
vo.addValidation("First Name","Please enter your First Name");
vo.addValidation("LastName","Please enter your Last Name");
vo.addValidation("Phone","Please enter your Phone Number","phone");
vo.addValidation("IP","Please enter your ip address","ipaddress");
vo.addValidation("Email","Please enter Email Address","email");
vo.addValidation("Date","Please enter a Date","date","",true);
vo.addValidation("Number","Please enter a Number","integer","",true);
vo.addValidation("Address","Please enter your Address");
vo.addValidation("Gender","Please select your Gender","radio");
vo.addValidation("Age","Please select your Age","select");
vo.addValidation("DOB","Please enter your DOB","date");
vo.addValidation("Animals Liked","Please choose the pets you like","checkbox");
vo.addValidation("I Agree","Please read our terms and check OK","checkbox");
vo.addValidation("NoLabel","Please enter a value");

clientValidation()
@ return (Array) returns an array of all currently added fields to be validated

Example

vo = createObject("component","adv_validation");
myValidationArray = vo.clientValidation();

serverValidation([validateServer])
@ param [validateServer] (Boolean) makes sure the form submittal is from this server to help prevent xss attacks - defaults to true
@ return (Query) returns a query containing of all fields to be validated on server that failed to be displayed to the user

Example

vo = createObject("component","adv_validation");
myValidationQuery = vo.serverValidation();

errorsExist()
@ return (Boolean) returns true if server validation has found 1 or more errors or the form has been submitted from another server and the serverValidation variable validateServer is true

Example

vo = createObject("component","adv_validation");
errorsExist = vo.errorsExist();

Usage - Javascript

To manually use the javascript validation provided (without the cf_adv_form) first include a validationSet variable that contains an object of fields to validate (see below) then include the generic_validation.js file. Make sure each field has a name, a label and an id to match the label's for attribute (for inline error messages).

var validationSet = {name:{regexp, error [, required]}};
Placed before the generic_validation.js file in the document head and defines fields to be validated. the validationSet variable contains an object made up of key/value pairs where the key is the for field's name and the value is an object containing a regular expression, error message and an optional required flag.

Example

<head>
<script type="text/javascript">
var validationSet = {'SSN':{'regexp': /\d{3}-\d{2}-\d{4}/,'error':'Please enter your SSN','required':false},
'First Name':{'regexp': /[^\s]+/,'error':'Please enter your name'}};
</script>
<script src="generic_validation.js" type="text/javascript">
...
</head>

Usage - CSS

All other styles can be modified with css knowledge. Additionally giving the form a class of: alerterror will cause the submit error message to be displayed via an alert, giving an input the class: noerrorspan will cause the blur message to be displayed via an alert rather than inline, finally giving a field the class of noblur will cause it not display error message onblur

.field {}
The style of the form field by default

Example

.field {
	background:#fff;
	border: 1px solid #999999;
}

.fielderror {}
The style of the form field when an error has occurred

Example

.fielderror {
	background:#FCEEEC;
	border: 1px solid #BF272D;
}

.validationmessage {
The style of the onsubmit validation message

Example

.validationmessage {
	font-weight: bold;
	color: #BF272D;
	background: #FCEEEC url(../images/error.gif) no-repeat 10px 10px;
	padding-top: 10px;
	padding-left: 40px;
	margin: 10px 0px;
	border: 1px solid #bf272d;
	display: none;
}

Back to Website Files

Click here

Comments

Feel free to comment below.

All Comments

shuns - 03/10/2006

Useful!

Client Login

Website Showcase

Web Design Files > Advanced Form

Advanced Form

Browser Support

Download

Examples

Comments

Usage - Tags

Usage - CFC

Usage - Javascript

Usage - CSS

Back to Website Files

Comments

All Comments

Subscribe to our email newsletter

Client Login

Website Showcase

Web Design Files > Advanced Form

Advanced Form

Browser Support

Download

Examples

Comments

Usage - Tags

Usage - CFC

Usage - Javascript

Usage - CSS

Back to Website Files

Comments

All Comments

Subscribe to our
email newsletter