Form Validation, Error Messages and Hints

Form validation is important. Without it there's nothing to stop your users entering completely meaningless data into your forms.

Form validation is easy to get right. iCM has a range of in-built validation options in every field.

Form validation is difficult to bypass. iCM always performs validation server-side. That means that as well as any validation a user sees in their browser when filling out a form, the validation is repeated when the form is submitted, stopping anyone from bypassing or manipulating the validation you've set up.

What Do We Mean by Validation?

Validation checks that the data input into your form is valid. It is generally carried out in the following order, with the next check only happening if the previous one is passed.

Required

At it's most basic, validation checks that required fields are filled in. In the forms designer, set the "Required" property to "true".

If a user tries to submit your form without filling in this field, they'll see the error message you enter in the "Error message" field.

Required or Optional?

In your form settings you can change the "Field label marker" so that rather than highlighting required fields with an asterisk, fields that are not required will have the text "(optional)" next to their labels.

GDS (the UK government's digital services department) suggest this approach in their style guide.

Length

Most fields let you set a maximum length. This restricts the maximum number of characters that can be entered into it.

Maximum length won't display any errors to a user, it simply stops them from entering any more than that number of characters into your field.

Pattern

Some fields include a range of preset patterns that can be used for validation.

The "Patterns" property of the text input field has the following options.

These load the following regular expressions, which get quite complicated, so are best not to worry about.

None    /.*/
Signed Integer    /^(\+|-)?\d+$/
Positive Integer    /^\d+$/
Number    /^[-+]?\d*\.?\d*$/
EMail Address    /^([a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~])+@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$/
UK Post Code (strict)    /^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$/
UK Post Code    /(GIR 0AA)|(((A[BL]|B[ABDHLNRSTX]?|C[ABFHMORTVW]|D[ADEGHLNTY]|E[HNX]?|F[KY]|G[LUY]?|H[ADGPRSUX]|I[GMPV]|JE|K[ATWY]|L[ADELNSU]?|M[EKL]?|N[EGNPRW]?|O[LX]|P[AEHLOR]|R[GHM]|S[AEGKLMNOPRSTY]?|T[ADFNQRSW]|UB|W[ADFNRSV]|YO|ZE)[1-9]?[0-9]|((E|N|NW|SE|SW|W)1|EC[1-4]|WC[12])[A-HJKMNPR-Y]|(SW|W)([2-9]|[1-9][0-9])|EC[1-9][0-9])\s{0,2}[0-9][ABD-HJLNP-UW-Z]{2})/i

If a user enters some text that does not fit your pattern, they'll see the error message you have entered.

Regular Expressions

Instead of using our preset patterns, you can write your own regular expressions to validate the data users type into your form fields.

The Regular Expression editor lets you enter a pattern and test it before you publish your form.

There's lots of information online about regular expressions. The MDN article from Mozilla is quite good: MDN Regular Expressions (opens new window).

JavaScript Functions

Each field also includes a "Validation Function" property. This lets you write a custom piece of JavaScript to check the content of the field. It will return true for valid, false for invalid.

In this example, the field will only pass validation if either "hello" or "goodbye" is typed into it.

function (helper, value) {
    var isValid;
    isValid = false;
    value = value.toLowerCase();
    if (value == 'hello' || value == 'goodbye') {
        isValid = true;
    }
    return isValid;
}

When to Validate

As already mentioned, validation is performed browser-side and repeated server-side to guard against someone manipulating your form using browser developer tools.

This also means that if someone has JavaScript disabled in their browser, validation will still work, because it will be performed server-side when the form is submitted. If validation fails the form will be reloaded, with the validation errors displayed.

You can also choose whether validation is performed "as you type" or "on form submission".

As you type validation is performed as soon as a user moves focus away from a field. For example, if a user types letters rather than numbers into our "Mobile Number" field, as soon as their cursor moves out of the field, validation is performed and the error will be displayed.

If you decide to perform validation when the form is submitted, no checks will be made on the values entered into your form fields until the user submits your form or moves to the next page in a multipage form. This validation is still performed browser-side and repeated again server-side.

Validating an Entire Page

So far we've only looked at adding validation to individual fields.

It's also possible to validate an entire form page. This is useful if you need to check the value of one or more fields against those of another. The fields you check can be on any page of the form.

There's a field type called Validator in the "Misc" category. It lets you write a JavaScript validation function and choose whether the check is made browser-side, server-side or both.

Displaying Errors

By default, error messages are displayed alongside the fields that have the errors.

You can also group all of your error messages together and display them in one summary using the Validation Errors layout field.

This field is hidden when your form first loads, and will only appear if any errors are generated when your form is submitted. It's settings let you decide if the inline error messages next to each field are displayed or hidden.

Custom Errors

By default, if a field errors, it will display the text "invalid". Each field has an "Error Message" option that lets you enter a more relevant message (see the example above).

But what if you want a different error message to appear, depending on what's been entered? You can alter the error message dynamically, based upon what the error is, using the field's Error Message Functions.

Providing Hints

There's nothing more frustrating than trying to fill out a form and not knowing the format you need to use to pass the validation.

We've all had to enter a postcode into a form and tried lowercase "pl67tl", uppercase without a space "PL67TL", or with a space "PL6 7TL" and got it wrong several times.

Hints are small pieces of guidance text bound to a field. They are best used to prompt users to enter a value in the format that's needed.

Here's a hint being displayed beneath our mobile number input field. In the Form Settings you can choose whether hint text appears above or below the input.

Examples