Data Validation For Power Apps Forms

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 employeename@companyname.com



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 employeename@companyname.com


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.

Matthew Devaney

Subscribe
Notify of
guest
30 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Ed Hansberry
1 year ago

Wait… what is this?

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

I don’t see an example of that in the docs. Looks like an array maybe?

Krishna Rachakonda
Krishna Rachakonda
1 year ago

Very nice. Well crafted.

Vijay Srinivasan
Vijay Srinivasan
1 year ago

Very well written. Simplified the concept greatly. Thanks a ton.

Almeida
Almeida
1 year ago

Hi Matt,

Very nice article! Easy to understand. I tried for the date validation , it worked well !! . Thank you for posting this article!.

I just wanted to know how this can be achieved if i have a similar requirement on PowerApps form ? I’m not able to add locShowValidate inside any property on form.

Your help will be greatly appreciated! Thank you.

Hank Hepler
Hank Hepler
1 year ago

Hi Matthew… great article! I am implementing this approach on my PA forms. One question though, I have some combo boxes with no “Selected” value just HintText. Would I need to add a default selected value to be able to check validity manually like you do above?

Hank Hepler
Hank Hepler
1 year ago

Yes, just a required value (value/id from a SharePoint List). I just did a quick insert form pointing to the SP List. So trying to remove clunky validation to something more pleasing to the eye lol.

Hank Hepler
Hank Hepler
1 year ago

Wow…thank you, would not have thought about the OnChange event. Thanks for your time Matthew! I look forward to learning from your examples!

HNS
HNS
1 year ago

Hi Matthew,
what would you recomend when we want to remove special character but also match them whith there non special correspondance ?

é => e
à => a
ç => c

Currently i’m using regex to validate the input but it’s not perfect and i’m not able to to the “translation”.

Any advice where i should look at ?

Thx for your time 🙂

HNS
HNS
1 year ago

Thx for sharing and didn’t know about that process 🙂 Thx for the code too, very cool

Ross
Ross
1 year ago

Great article. I’m having an issue when I go in to edit the form (other fields not required for validation), I cannot submit due to the validation not occurring (my validation field is already populated). Do you have a solution for this please? Thanks

Michael Lockwood
Michael Lockwood
1 year ago

So maybe I am missing something here but if the textbox is blank to begin with or has a hint text and the person skips over it or even clicks the field and then out or tabs through then the onChange event is never fired. Am I missing something?

Steve Hanzelman
Steve Hanzelman
1 month ago

Hi Michael,
Did you ever solve this?

This solution is PERFECT (as are all of Matthew’s posts), but I’m having the same issue.

Thanks,
Steve

Paul H
Paul H
1 year ago

Is there currently any way of doing more advanced validation on these forms, specifically checking a value against another source (database/api)? In cases where a user is providing some kind of code, you can add regex to ensure the format is correct, but it would be great to validate the code actually exists before the form submission is complete

Emilie Cina
Emilie Cina
4 months ago

Hey Matthew, I’m still pretty new to PowerApps and your website is a real goldmine to get ahead!
I have been able to successfully implement these form validations in my app, but have a question:
Is there a way to reset “locShowValidation”? When I exit the form and reopen it, the “old” validations are still active, which is not so nice.
Thanks for your help & merry christmas!

Emilie Cina
Emilie Cina
4 months ago

thank you so much! this worked out for me 🙂

Parimal
Parimal
3 months ago

Nice article with very useful content. I used it and worked perfectly.
Thank You for putting all this hard efforts.

Jin Way
Jin Way
2 months ago

Hi Matthew, I’m still relatively new to PowerApps and have been learning quite a bit from here.

I have a form that allows users to update data previously submitted. What I’d like to do is to validate all the text inputs (Around 20), and see if any changes made to the data. If no changes made at all, the ‘Update’ button would be disabled. The moment, one of the text input is modified, the button would be enabled.

Any suggestions on how to do that?
Thanks!

Berihun Addis
Berihun Addis
13 days ago

Thanks! but I’m confuse where i put this code ? and how to set variable locShowValidation? please provide details the other your methods are clear
UpdateContext({
locShowValidation: {
FullName: false,
Age: false,
ReservationDate: false,
PhoneNumber: false,
EmailAddress: false
}
});

Berihun Addis
Berihun Addis
3 days ago

Thank you Matthew Devaney! and one more question where I put the variable ‘locShowValidation’?