Use Validation Groups for Buttons with Multiple Validation Rules

Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

Goal

Present two buttons to the end user that, based on the selection, will validate only after a particular button is clicked.

This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.

This scenario demonstrates:

  • How to use validation groups

Expression

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
=load(
  /*
   * All of these local variables could be combined into the employee CDT and passed into
   * a process model via a rule input
   */
  local!firstName,
  local!lastName,
  local!department,
  local!title,
  local!phoneNumber,
  local!startDate,
  /*  
  * local!isFutureHire is a placeholder varaiable used to set the validation group trigger.
  * When isFutureHire is set to true, a user can skip phone number and start date.
  */
  local!isFutureHire,
  a!formLayout(
    label: "Example: Add Employee with Conditional Requiredness",
    contents: {
      a!textField(
       label: "First Name",
        value: local!firstName,
        saveInto: local!firstName,
        required: true
      ),
      a!textField(
        label: "Last Name",
        value: local!lastName,
        saveInto: local!lastName,
        required: true
      ),
     a!dropdownField(
        label: "Department",
        choiceLabels: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },
        placeholderLabel: "-- Please Select a Department -- ",
        choiceValues: { "Corporate", "Engineering", "Finance", "Human Resources", "Professional Services", "Sales" },
        value: local!department,
        saveInto: local!department,
        required: true
      ),
     a!textField(
        label: "Title",
        value: local!title,
        saveInto: local!title,
        required: true
      ),
     /*
     * When a field has a validation group set, the required parameter and any validations
     * are deferred until the validation group is triggered by a button or link.
     *
     * Multiple validations are added to the phone number field by adding a local variable
     * that turns off required and validation group, but triggers a standard validation
     * upon unfocus from the field (rather than the onboard button click).
     */
     with(
       local!isNumberValid:if( len( local!phoneNumber ) <= 12, true, false ),
       a!textField(
          label: "Phone Number",
          placeholder: "555-456-7890",
          value: local!phoneNumber,
          saveInto: local!phoneNumber,
          required: local!isNumberValid,
          requiredMessage:"A phone number is needed if you're going to onboard this employee",
          validations: if(local!isNumberValid,"","Please enter a valid telephone less than 12 digits long."),
          validationGroup:if(local!isNumberValid,"Future_Hire","")
        )
      ),
     a!dateField(
        label: "Start Date",
        value: local!startDate,
        saveInto: local!startDate,
        required:true,
        requiredMessage:"A start date is needed if you're going to onboard this employee",
        validationGroup:"Future_Hire"
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Submit as Future Hire",
          value: true,
          saveInto: local!isFutureHire,
          submit: true
        ),
        a!buttonWidget(
          label: "Onboard Employee Now",
          value: false,
          saveInto: local!isFutureHire,
          submit: true,
          validationGroup: "Future_Hire"
        )
      }
    )
  )
)

Test it out

  1. Click Submit As Future Hire without entering any information. Notice that the standard required message is displayed for four of the six fields.
  2. Enter a value for First Name, Last Name, Department, Title. Click Onboard Employee Now. Notice the two remaining fields will show a custom validation error.
FEEDBACK