Toggle menu

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.


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

Required Fields in the Forms Designer

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.

Validation Error Display

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.

Form Label Marker

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


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

Setting the Maximum Length

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.


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.

Text Field Patterns

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)$/

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.

Regular Expression Editor

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".

Validation Settings

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.

A Form Hint


Text Field Validation As you Type

This form demonstrates required, patterns, RegEx and JavaScript validation.

Highlight Valid Fields As You Type

As well as highlighting invalid fields, this example highlights valid fields as values are entered into them.

Text Field Validation On Submit

This form doesn't perform any validation until the page is submitted.

Custom Error Messages

Many fields support custom error message functions you can use to tailor the message depending on the error that's thrown.

Make a Field Required using Validation Functions

You can compare one field to another to dynamically check the validation.

Field Hints

These forms show how field hints can be positioned and customised.

Share this page

Facebook icon Twitter icon email icon


print icon