Add Multiple Validation Rules to One Component

Interface recipes give you an opportunity to explore different interface design patterns. To learn how to directly use interface recipes within your interfaces, see Adapt an interface recipe to Work with My Applications.

Goal

Enforce that the user enters at least a certain number of characters in their text field, and also enforce that it contains the "@" character.

This scenario demonstrates:

  • How to configure multiple validations for a single component

Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
=load(
  local!varA,
  a!formLayout(
    label: "Example: Multiple Validation Rules on One Component",
    contents:{
      a!textField(
        label: "Text",
        instructions: "Enter at least 5 characters, and include the @ character",
        value: local!varA,
        saveInto: local!varA,
        validations: {
          if(len(local!varA)>5, null, "Enter at least 5 characters"),
          if(isnull(local!varA), null, if(find("@", local!varA)<>0, null, "You need an @ character!"))
        }
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: a!buttonWidgetSubmit(
        label: "Submit"
      )
    )
  )
)

Test it out

  1. Type fewer than 5 characters and click "Submit".
    • When testing offline, the form queues for submission but returns the validation messages when you go back online and the form attempts to submit.
  2. Type more than 5 characters but no "@" and click "Submit".
    • When testing offline, the form queues for submission but returns the validation messages when you go back online and the form attempts to submit.
  3. Type more than 5 characters and include "@" and click "Submit".
FEEDBACK