Data Validation For Power Apps Forms

Data validation should be implemented in every Power Apps form. Ensuring information is received in the proper format means less work to standardize it later. Data accuracy is also important when creating trustworthy reports. But perhaps the most satisfying part is: when done well, data validation can improve the user experience by giving timely feedback.

I will show you my simple method for performing data validation in Power Apps forms as seen in the image below.

Table Of Contents:
Introduction: The Vehicle Reservation App
Create The 'Reserve A Vehicle' Form
Data Validation With Logical Expressions
* Full Name Field
* Age Field
* Reservation Date Field
Data Validation With Pattern Matching
* Phone Number Field
* Email Address Field
Submitting The Form

Introduction: The Vehicle Reservation App

The Vehicle Reservation App allows employees to book a company car. Employees fill-in a form with information subject to the following criteria:

• Full Name – cannot not be blank
• Age – must be 21 years old or greater
• Reservation Date – can book only Monday-to-Friday. Must be a future date.
• Phone Number – must be in the format ###-###-####
• Email – must be in the format [email protected]
  
  

We want to data validation to occur at exactly the right-time to provide the best user experience. The moment a user leaves the current field and moves onto the next one they should be made aware of an error. Waiting until a form has been submitted is too late. Evaluating input while the user is still typing is too early.

Create The ‘Reserve A Vehicle’ Form

Open Power Apps Studio and create a new app from blank. Then make a variable called locShowValidation holding a true/false value for each field name to control when data validation is shown to the user. Initially, all fields are set to false and change to true when the OnChange property of an input field is triggered.


Put this code in the OnVisible property of the screen.

UpdateContext({
    locShowValidation: {
        FullName: false,
        Age: false,
        ReservationDate: false,
        PhoneNumber: false,
        EmailAddress: false
    }
});

Data Validation With Logical Expressions

The most common way to perform data validation is by using a logical expression: a statement that evaluates to either true or false.

Validating A Full Name Field

‘Full Name’ is a required field that cannot be blank. Place an icon control beside the Text Input for ‘Full Name’. Its symbol will change if validation was passed: a checkmark for success and an ‘X’ for failure

Write this code in the Icon property of the Icon.

Icon: If(!IsBlank(txt_FullName.Text), Icon.Check, Icon.Cancel)

Then style the icon by adding this code to each specified property.

BorderColor: If(Self.Icon=Icon.Check, DarkGreen, DarkRed)
Color: White
Fill: If(Self.Icon=Icon.Check, Green, Red)
Visible: locShowValidation.FullName

The icon should only appear once the user has entered data into the ‘Full Name’ text input and leaves the field. Make this happen by using the code below inside the OnChange property of the Text Input.

UpdateContext({locShowValidation: 
    Patch(locShowValidation, {FullName: true})
});

When the ‘X’ icon is showing a failure the user should be told what changes need to happen. Insert a new label directly below the text input for ‘Full Name’ with this code in each property.

Text: "Field cannot be blank"
Visible: ico_FullName.Icon=Icon.Cancel And ico_FullName.Visible
Color: Red

Once completed, data validation will now be working for the ‘Full Name’ field.

Validating The Age Field

An employee cannot reserve a vehicle unless they are 21 years of age or older.

Use the same method to create an Icon for ‘Age’ as was shown for ‘Full Name’ but change the logical expression in the Icon property to this instead.

If(Value(txt_Age.Text) >= 21, Icon.Check, Icon.Cancel)

Likewise, create a label underneath the text input for ‘Age’ using the previously shown method while having this text instead.

"Must 21 years of age or older to reserve a vehicle"

Validating The Reservation Date Field

Reservations may only be made for Monday-to-Friday and the booking must be for a future date.

Write this code in the Icon property of the Icon to ensure the input date matches both conditions

If(
    Weekday(dte_ReservationDate.SelectedDate, StartOfWeek.Monday) <= 5
    And dte_ReservationDate.SelectedDate > Today(),
    Icon.Check, Icon.Cancel
)

Then write a multi-condition IF function in the Text property of the error message label to describe which requirement was not fulfilled.

If(
    Weekday(dte_ReservationDate.SelectedDate, StartOfWeek.Monday) > 5,
    "Must choose a weekday Monday to Friday",
    dte_ReservationDate.SelectedDate <= Today(),
    "Must choose a date in the future",
    "No reservation date was selected"
)

Data Validation With Pattern Matching

A more sophisticated data validation technique can detect whether an input value has the required letters, numbers and symbols all in the correct positions. This technique is known as pattern matching.

Validating A Phone Number Field

Phone numbers must be entered in the format ###-###-####.

The ISMATCH function can be supplied a pattern of letters (Match.Letter), numbers (Match.Digit) and symbols joined together as a text-string to form a pattern. Explaining how to write patterns would require an entire article itself so I will refer you to the official documentation for the ISMATCH function instead.


Place this code in the Icon property of the Icon for ‘Phone Number’.

If(
    IsMatch(
        txt_PhoneNumber.Text,
        Match.Digit&Match.Digit&Match.Digit&"-"&
        Match.Digit&Match.Digit&Match.Digit&"-"&
        Match.Digit&Match.Digit&Match.Digit&Match.Digit
    ),
    Icon.Check,
    Icon.Cancel
)

Use this string as the text for the error message.

"Phone number must be in format ###-###-####"

Validating An Email Address Field

An email address must be in the format [email protected]

Conveniently, a predefined matching pattern already exists for email addresses. Use this code in the Icon property of the icon for ‘Email Address’.

If(
    IsMatch(txt_EmailAddress.Text, Match.Email),
    Icon.Check,
    Icon.Cancel
)

This error message should be displayed if the pattern is not matched.

"Not a valid email address"

Submitting The Form

Users should only be allowed to submit the form once all fields have passed data validation.

Write this code in the DisplayMode property of the Submit button.

If(
    ico_FullName.Icon=Icon.Check
    And ico_Age.Icon=Icon.Check
    And ico_ReservationDate.Icon=Icon.Check
    And ico_PhoneNumber.Icon=Icon.Check
    And ico_EmailAddress.Icon=Icon.Check,
    DisplayMode.Edit,
    DisplayMode.Disabled
)

Questions?

If you have any questions or feedback about Data Validation In Power Apps Forms please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.