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.

Building a basic input

First, open Primitives section of UI component sidebar on left and drag an Input to canvas.

Next we need to bind something as the value of our Input, so create a new Page variable called input_value in the 'Variables' tab on the canvas. Then navigate back to the input field and choose the value of the Input to be input_value from the Properties sidebar on right.

Now the input_value variable will dynamically change depending on what the user types to the Input in the app. Furthermore, as we want user to write an email to the input, you can change the Keyboard type to email-address from Input Properties tab like so:

Basic visualisation

A quick and easy way to visualise the validity of input_value is to use Formula functions with the Input styles.

To do so, go to the Style tab on right, while you have the Input field selected on the canvas and press Edit.

From there, navigate to Border configuration tab and change 'Border color' binding type to Formula. (See screenshot below). Set 'Border style' to a preferred type and paste the string below to the Formula:

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.

Now you can preview your app and try typing some emails to the Input. The Input bottom border will immediately reflect the validity of what you've written.

Other validation possibilities

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"))

Modify the number '10' in the formula to set the minimum password length.

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"))

Modify the numbers '100' and '10000' to set up the number boundaries.

Input contains a certain string

IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(CONTAINS(pageVars.input_value, "test"), "limegreen", "red"))

Modify the "test" string to set a text to check for.

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"))

Validating only after specific interaction

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"))

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.

Bonus: Show an icon depending on input value validity

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.