Tip: Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
Alert the user about form problems that aren't specific to one component, showing the message only when the user clicks "Submit".
In this case, there are two fields and although neither are required, at least one of them must be filled out to submit the form.
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
a!localVariables(
local!phone,
local!email,
a!formLayout(
label: "Example: Showing Form Errors on Submission",
contents:{
a!textField(
label: "Phone Number",
value: local!phone,
saveInto: local!phone
),
a!textField(
label: "Email Address",
value: local!email,
saveInto: local!email
)
},
buttons: a!buttonLayout(
primaryButtons: a!buttonWidget(
label: "Submit",
submit: true
)
),
/*
* This validation occurs at the form level and is useful when the form or
* section's validation checks are non-field specific.
*/
validations: {
if(
and(isnull(local!phone), isnull(local!email)),
a!validationMessage(
message: "You must enter either a phone number or an email address!",
validateAfter: "SUBMIT"
),
{}
)
}
)
)
REFRESH) or when the user submits the form (SUBMIT). If the validation message should always be shown right away, we could just pass the message to a!formLayout()'s validations parameter as Text. To show multiple messages, we can pass a list of Text, a list of a!validationMessage(), or a mix of the two.a!sectionLayout() to show validation messages:
Showing Validation Errors that Aren't Specific to One Component
