Validation rules (WCMS 2)

How to use validation rules

 

Validation rules can be used to limit or control the information users can enter in a Web form component field.

  1. From the Webform tab click the Form validation button.

Validation rules are used to validate the information entered in a Web form component field against that rule. For example, a Numeric value validation rule ensures that user-entered values are numeric. Alpha characters or symbols would result in a validation error message.

Adding Validation rules to a web form

Add the Numeric value validation rule to the Recipient phone component.

  1. Click on the title of the validation rule you would like to use. For this example we will select Numeric value.

  2. Create a Rule name, Recipient phone.

  3. Check the box beside the component you are adding the validation rule to, Recipient phone.

  4. Complete optional steps as necessary.

  5. Click Add rule button.

Clientside validation

Clientside validation checks the user-entered information as soon as it is entered in a component field. If Exclude from clientside validation box is checked, the user-entered information will not be checked until the form is submitted.

Regular expressions

These are a type of validation rule that defines a pattern that a piece of text may or may not match. For example, it could define that the text must start with, end with or contain a certain sequence of letters (these are simple applications). Regular expressions (regex) are case sensitive. 

Here are some regular expressions and what they do:

Example 1: water

This regex would match any of the following:

  • @uwaterloo.ca

  • whitewater

  • I need a drink of water.

Example 2: @uwaterloo.ca

This regex would match any of the following:

But, if we want to only match UWaterloo email addresses, we need to improve the regex. To do this we need to know about special characters.

Special characters

  • A period ‘.’ matches any character (which is why the regex matches the third bullet).

  • To literally match a period used in a string of text, we need to add a backslash ‘\’ before the period.

@uwaterloo\.ca

  • This regex would match the first two email addresses, but not the third.

Now we need to ensure the regex only matches if it appears at the end of the text. For this, we add a dollar sign ‘$’ to the end. The dollar sign matches the end of the text.

@uwaterloo\.ca$

  • Now the pattern will only match a piece of text that ends with “@uwaterloo.ca”.

This example demonstrates the importance of testing your regex against data that should and should not match.

Note: The backslash ‘\’ is needed before any special character you want to match. i.e. $ would match a dollar sign in the text, and not represent the end of the text.

Example 3: ^[0-9]{3}-[0-9]{3}-[0-9]{4}$

This example introduces character classes, which are indicated by the square brackets ‘[]‘.

  • ‘[0-9]’ matches any digit from 0-9.

  • ‘{3}’ means that the previous thing must appear exactly 3 times. 

  • ‘^’ (caret) matches the beginning of the text. It is the opposite of ‘$’ (which matches the end of the text).

  • This regular expression matches a telephone number (within the North American numbering plan).

Adding a Regular expression to a Web form

You can add a Regular expression validation rule to the Phone component of your web form. You may want to match the pattern: 555-555-5555.

  1. From the Webform tab click the Form validation button.

  2. Click on the title of the validation rule you would like to use. For this example we will select Regular expression.

  3. Create a Rule name, Phone.

  4. Check the box beside the component you are adding the validation rule to, Phone.

  5. Enter the Regex code, ^[0-9]{3}-[0-9]{3}-[0-9]{4}$

  6. Enter a Custom error message.

    1. Enter Phone must be entered as 555-555-5555

    2. Complex validation rules require a custom error message that will be displayed if user-entered information doesn’t pass validation.

Additional resources for regular expressions