Input validation
In this tutorial we'll show you how to validate and visualise an Input field continuously while user is typing. We'll also show you a way to do the validation only after user has interacted with the app in some specific manner, e.g. taking the focus away from the Input field or pressing some Button ("Confirm", "Next page", etc.)
User input can be validated based on plethora of things by using our wide range of Formula functions. For example password length and number staying within limits can be validated this way.
Here we will build an Input field that will validate and visualise if what user has typed is an email or not. We'll also show you a couple of examples to change the input to be validated based on other criteria. But without further ado, let's start building the input...
First, open Primitives section of UI component sidebar on left and drag an Input to canvas.
We'll use the Primitive version instead of a ready Input field component to have more flexibility with the style properties of the component without the need to convert the Input field into a Container and configuring some properties.
Next we need to bind something as the value of our Input, so create a new Page variable called input_value to your page. Then choose the value of the Input to be input_value from the Properties sidebar on right.
Now input_value will change depending on what the user types to the Input in the app.
As we want user to write an email to the input, you can change the Keyboard type to email-address from Input Properties tab.
A quick and easy way to visualise the validity of input_value is to use Formula functions with the Input styles.
So, go to Style tab on right sidebar while you have the Input selected on Canvas and open Border section. Change Color binding type to Formula from the dropdown that opens by clicking the oval icon. Then write this to the Formula:
If you're not seeing the 'Border' section it means you're using the Input component from 'Forms' category rather than the 'Primitives' category. In this tutorial we're using the Input from 'Primitives'.
IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(IS_EMAIL(pageVars.input_value), "limegreen", "red"))
This Formula outputs a color based on input_value. It outputs a light gray color if the input_value is empty, a lime green if the input_value is an email and red when it's not, but has some text.
Composer allows you to define the used colors in many ways. Read more about colors here.
Now you can run the app and try typing some emails to the Input. The Input bottom border will immediately reflect the validity of what you've written.
There are many other things than just email that can validated through Formulas this easily. Here's a few example Formulas that you can try out by replacing the Formula that you just added to define Border color:
Long enough password
IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(LENGTH(pageVars.input_value) >= 10, "limegreen", "red"))
Numeric input value is between certain values
IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(NUMBER(pageVars.input_value) >= 100 && NUMBER(pageVars.input_value) < 10000, "limegreen", "red"))
Input contains a certain string
IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(CONTAINS(pageVars.input_value, "test"), "limegreen", "red"))
Input is one of specific values
IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(IS_IN_ARRAY(["only", "these", "values", "are", "allowed"], pageVars.input_value), "limegreen", "red"))
IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(IS_IN_ARRAY_BY_KEY([{property: "only"}, {property: "these"}, {property: "values"}, {property: "are"}, {property: "allowed"}], "property", pageVars.input_value), "limegreen", "red"))
If you don't want your Input field to continuously show the validity of the user's input, but rather want to highlight the invalid fields for example when user takes the focus away from the Input field or presses a Button to confirm their choices / inputs, we have to create another variable that the Border color Formula should follow.
So, create another Page variable input_state with type Text and select it to allow only specific values.
Make sure that the Initial value of input_state is default. Then, it's time to change the Formula that defines the Border color of the Input field. Change it to this:
IF(pageVars.input_state === "valid", "limegreen", IF(pageVars.input_state === "invalid", "red", "lightgray"))
If you run the app now, the Border color won't change based on user's input. To make that happen we need to change the input_state to correspond the situation.
Drag a Set page variable Flow function to Input's logic canvas. Use the Flow function to set input_state Page variable based on this Formula:
IF(IS_EMPTY(pageVars.input_value), "default", IF(IS_EMAIL(pageVars.input_value), "valid", "invalid"))
Again we check if the input value is an email or not, but of course many other validity tests would also work.
Here we want to show the validity of input value after user has finished typing and when they change the app's focus away from the input field. So, connect the Set page variable Flow function to onBlur event of the Input.
Now the Border color should change based on input value only after the app's focus is no longer on the Input field.
You can adjust the specific moments when the Border color should change in many ways by using the different events available.
The input_value and input_state variables can also be used outside the scope of the Input field. For us this allows a possibility to show a specific Icon to indicate the input validity. So, let's drag an Icon to the canvas.
Then we need a couple of Formulas to make the Icon match the input validity. First define the Icon name on the Properties tab with this Formula:
IF(pageVars.input_state === "valid", "check-circle", "exclamation-circle")
We want to show the Icon only when input_state is valid or invalid, not when it's default. So, from Advanced section of the Properties tab bind the Visible property to this Formula:
pageVars.input_state !== "default"
Lastly, use this Formula to define the Icon's Text color on Style tab's Typography section:
IF(pageVars.input_state === "valid", "limegreen", "red")
Now the icon will appear with a correct appearance when user finishes writing in the Input field. Only thing to do now is to change the design a little to place the Icon to a better spot.
Drag a Row to canvas. Then move the Input into the Cell #1 and the Icon to Cell #2. Then select the Cell #2 and change related Cell width to 40px. This will assure that the Input field won't stretch back-and-forth depending on if the Icon is visible or not.
By default the Icon will stay close to the input on left, but we want it to stay far on right. So change the Cell #2 to align items right.
Lastly, the Icon looks to be aligned to the top of the Row, but we want it to stay in the middle. So select the Row and align its cell content to middle.
Done! Now you're able to build Input fields that give users visual clues when the input value matches the required criteria.
