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.
GoalCopy link to clipboard
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
ExpressionCopy link to clipboard
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
a!localVariables(
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!buttonWidget(
label: "Submit",
submit: true
)
)
)
)
Copy
Test it outCopy link to clipboard
- 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.
- 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.
- Type more than 5 characters and include "@" and click "Submit".
FeedbackCopy link to clipboard
Was this page helpful?