Written
The client-side JavaScript validation is the validation that shows error tips when the page is viewed in the browser. There are several ways to set this up depending on how your form is built and this FAQ tries to explain them. There is also a list of the available validations.
There are two parts necessary to activate the validation. The necessary JavaScript and CSS files have to be loaded in the page and the individual element need to have classes added to identify the validations to be applied.
Loading the files
The ChronoForms Show HTML action will load the necessary files if:
a) Load ChronoForms Files is set to Yes on the form General tab (it is by default)
and either
b1) Enable JS Validation is set on in the form JS Validation tab (it is off by default)
or
b2) AutoDetect Settings is set to Yes on the form General Tab (it is by default)
and the string "validate[" is found in the form HTML
and the string "validate[" is found in the form HTML
Note: my Show HTML [GH] action works in the same way except that it does not currently check the AutoDetect Settings value
Adding the classes
You can set validation for individual form inputs by:
1) Using the checkboxes in the element configuration Validation tab
or
2) Adding validation classes to the Field Class box on the element General tab
or
3) Using the Auto JavaScript Validation action and adding the input names in the appropriate boxes as a comma separated list with no spaces e.g. first_name,last_name,email
or
4) Adding validation classes to the Form HTML directly in either a Custom Code element or the Form HTML box on the Code tab if the form Type is Custom
or
2) Adding validation classes to the Field Class box on the element General tab
or
3) Using the Auto JavaScript Validation action and adding the input names in the appropriate boxes as a comma separated list with no spaces e.g. first_name,last_name,email
or
4) Adding validation classes to the Form HTML directly in either a Custom Code element or the Form HTML box on the Code tab if the form Type is Custom
Note: In general you should only use one of these methods for any input as otherwise you may create two class attributes for the same element and one of them will be ignored.
If you add validation classes manually the format is, for example validate['required','alphanum'] in the element class box or class="validate['required','alphanum'] some_other_class" in the Form HTML.
Validation classes
Here is a list of the values that are supported by the FormCheck library used by ChronoForms
In the Auto JavaScript Validation action
required, alpha, alphanum, digit, nodigit, number, email, phone, phone_inter, url, image
Most of these are also available on the individual element Validation tabs
As hand-entered classes
All of the above plus:
confirm, differs, length, words, target, %functionName
confirm checks that two inputs are the same and is used as confirm[input_name]
differs check that two inputs are different and is used as differs[input_name]
length is used as length[min,max] e.g. length[5,12] - use -1 for the max value to set no limit.
words uses the same syntax as length
target can be used to show the error on a different element, use as target[element_id]
%functionName is used for a custom validation, see the Custom Validation FAQ
