Form Validation - v10

You may want to include validation on required fields. This will ensure that when user are interacting with the form they are providing the correct information and also this will cut down on invalid submissions.

From Validation in frevvo will direct the user to move back and correct a mistake as it is made.

Screen readers will announce "Error" and then any instructions you include in the Error Msg. Upon encounter the field a screen reader will announce "Invalid" and then the contents of the field.

See also Error Action

Additional Documentation by Frevvo

Default Control Types

Choosing a control type of one of the follow will add the default validation to that field. In the following section we will take a closer look at what the validations are actually doing.

  • Text
  • EMail
  • Money
  • Phone
  • Quantity
  • Number

Example: Email Address Validation

This example will show you how to add an email address validation to a text field. Once completed id a user makes a mistake the field will be announce to a screen reader like the following

  • While sitting on the field, "Email Address, Star, Edit Required."
  • Upon leaving the Field, "Alert, Must be valid email address."
  • Upon encountering their invalid entry,"Invalid entry", and then the text will be read that is in the input.

  1. Create a text field and give it a Label of Email Address
  2. In the properties menu on the left fill in the following areas:
    1. Pattern

      [a-zA-Z0-9\-_][a-zA-Z0-9\-\+_]*(\.[a-zA-Z0-9\-\+_]+)*@([a-zA-Z0-9\-_]+\.)+[a-zA-Z]{2,6}
    2. Error Message
    3. Required - Checkbox

  3. Save your form and test it

Other Validation Patterns

All the Validation Patterns are XML schema regular expressions (regex) created. you can use an a tool like regex101 to create your own patterns or use any of the following.

The following examples were found on frevvo's documetation site linked at the top of this page.

US Zip Code Pattern

A pattern that restricts a text control to only allow strings formatted as a US zip code: ##### or #####-####:

\d{5}|\d{5}-\d{4}

The form will flag an error unless the value entered is either five digits or five digits followed by the '-' character followed by 4 digits.

US/Canada Zip/Postal Code Pattern

This pattern validates US zip codes (##### or #####-####) and Canadian postal codes (L#L #L#).

>(\d{5}(-\d{4}))|(\d{5})|([ABCEGHJKLMNPRSTVXY]{1}\d{1}[A-Z]{1} *\d{1}[A-Z]{1}\d{1})

SSN

This pattern ensures that the user enters a valid Social Security Number:

\d{3}-\d{2}-\d{4}

Numbers with commas

The default number control supports digits followed by an optional decimal point and multiple decimal places. Suppose instead you want to allow numbers containing commas and optionally starting with a '$' and only up to 2 decimal places. For example: $1,000.50 2,500. But also to allow numbers without the comma such as $1000. To do this:

  • Add a text control to your form

  • Set the pattern to:

    \$?([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(\.[0-9][0-9])?

If you do not want to allow the optional '$' then:

  • Set the pattern to:

    ([0-9]{1,3},([0-9]{3},)*[0-9]{3}|[0-9]+)(\.[0-9][0-9])?

Phone pattern

A pattern such as ##-####-#### or ####-###-### is not a simple restriction. To impose validation against this pattern you must start with a Text control rather than a Phone control

\d{2}-\d{4}-\d{4} or \d{4}-\d{3}-\d{3}


com.atlassian.confluence.content.render.xhtml.migration.exceptions.UnknownMacroMigrationException: The macro 'ivy-ai' is unknown.