Client-side validation

TerraForm provides server-side validation automatically. However, supplementary client-side validation saves time for your visitor as the page does not need to reload to catch simple errors, which also reduces the load on your server. You can add client-side validation to your forms by either writing your own custom JavaScript validation code, or by using qForms. Here are two examples of client-side validation for your form.

When implementing client-side validation, you need to consider localization implications. If your form is being presented for different locales, each locale may have a different date format, for example. If your validation can't handle the differences, you are better to leave it out. TerraForm's server-side validation will catch any problems.

To add your own code, you simply make use of the onsubmit attribute for the opening cf_terraform tag: onsubmit="validateForm()". From there it is up to you to validate your form just like any regular HTML form. Remember that JavaScript is case-sensitive, so your field names must be written in the same case as in your cf_terrafield tags. The first example below uses code from About.com's Focus on JavaScript.

The second example relies on qForms, a powerful JavaScript API for working with HTML forms. For the qForms example to work, you must download and install the qForms JavaScript API independently. The example assumes qForms is available at the web path /lib/. If the demo doesn't seem to work, this path is probably wrong. You can change it by editing the value for attributes.qFormsPath in customtags\terraform\en\US\defaults.cfm.

Techniques demonstrated