Client Side Validation

jQuery Validation Plugin

The standard formtool library leverages Jörn Zaefferer's jQuery Validation Plugin. The basic method is to attach to the form's onsubmit event, read out all the form elements' classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

List of validation methods

  • required
  • email
  • url
  • date
  • number
  • digits
  • creditcard

Validate Content Types

Simple add ftValidation to your Formtool Property with a comma separated list of validation requirements.

Example

<cfcomponent name="superHero" extends="farcry.core.packages.types.types" output="false" displayname="Super Hero">

	<cfproperty
		name="title" type="string" hint="Super hero title." required="true"
		ftSeq="1" ftValidation="required" ftFieldset="General Details" ftWizardStep="Teaser Information" ftLabel="Title" />
	<cfproperty
		name="mailaddress" type="string" hint="His Email"
		ftSeq="2" ftValidation="required,email" ftFieldset="General Details" ftWizardStep="Teaser Information" ftLabel="Email Address" />
	<cfproperty
		name="homepage" type="string" hint="Homepage"
		ftSeq="3" ftValidation="url" ftFieldset="General Details" ftWizardStep="Teaser Information" ftLabel="Homepage" />
	<cfproperty
		name="nbrOfSiblings" type="integer" hint="Siblings" default="0"
		ftSeq="4" ftValidation="required,digits" ftFieldset="General Details" ftWizardStep="Teaser Information" ftLabel="Siblings"	/>

</cfcomponent>

Additional methods

There are additional methods like lettersonly or nowhitespace provided by the jQuery plugin which are not loaded by default.

You can register and load the javascript file when you want to use it.

<skin:registerJS 	id="jquery-validate-additional"
					baseHREF="#application.url.webtop#/thirdparty/jquery-validate"
					lFiles="additional-methods.js"
					bCombine="false" /> <!--- Combine doesn't work. Seems to have a problem with the regex.  --->
<skin:loadJS id="jquery-validate-additional" />

Open core/webtop/thirdparty/jquery-validate/additional-methods.js to see all documented validation functions.

Differences to Farcry 5

Versions of FarCry prior to 6 utilised a mixture of Javascript libraries to build the various features of the formtool engine. Specifically we used prototype for simple validation. jQuery is now the sole library (with jQueryUI), and the validation methods have been replaced with the equivalent jQuery function.

FC6 (jQuery)

FC5 (Prototype)

Description

required

required

(not blank)

number

validate-number

(a valid number)

digits

validate-digits

(digits only)

date

validate-date

(a valid date value)

email

validate-email

(a valid email address)

url

validate-url

 

validate-date-au

(a date formatted as; dd/mm/yyyy)

 

validate-currency-dollar

(a valid dollar value)

 

validate-selection

(first option e.g. 'Select one...' is not selected option)

 

validate-one-required

(At least one textbox/radio element must be selected in a group)

creditcard

 

Credit Card Number

lettersonly*

validate-alpha

(letters only)

alphanumeric*

validate-alphanum

(only letters and numbers)

dateISO*

 

2010-09-30

letterswithbasicpunc*

 

abc123.?!:

nowhitespace*

 

no blanks

time*

 

23:59

* only available if additional-methods.js is included.