Power Apps Text Input Pattern Validation
Do you ever have a form with a text box for someone to type their phone number or email address, and would like to enforce that pattern? In many forms, we don’t want the form to be able to be submitted if the data hasn’t been typed in the correct way, or pattern, like social security number, phone numbers, bank numbers, etc. In this post, I’ll tell you how you can accomplish that in PowerApps. You’ll be using the IsMatch, Match, and/or MatchAll functions. Yes, RegEx expressions can be use in PowerApps, too!
IsMatch – this function gives you a boolean (true/false) answer of whether or not some string of text matches a certain pattern.
Match – Lets you know what in the string of text matches a certain pattern, such as finding an email address somewhere in a text box and letting you know what the email address is.
MatchAll – Lets you know all matches of a certain string or pattern within another string.
In my example, I have a form with a field (column) called Business Phone. I don’t want people to be able to submit this form if the phone number isn’t in the correct pattern. I’ll just say I want my pattern to be ###-###-####.
1. Unlock the card.
2. First, it will help to rename the text box, instead of DataCardValue7 or whatever it is by default. Rename it to txtBusinessPhone.
3. For starters, I just want to show the fill color of the text box as red if the pattern is not my phone number pattern. Select txtBusinessPhone, and go to the Fill property of this control. Since IsMatch will let us know a boolean true or false whether or not the text matches the pattern, then we can use this IF formula to set the color depending on if the text matches.
You don’t have to use the Fill property, you could use the border color or any of the other color properties.
Enter this as the fill property. If it matches the pattern, fill white, otherwise fill red:
If(
IsMatch(
txtBusinessPhone.Text,
Digit & Digit & Digit & Hyphen & Digit & Digit & Digit & Hyphen & Digit & Digit & Digit & Digit
),
White,
Red
)
4. You’ll also want the HoverFill to match this one, so enter this in the HoverFill property:
txtBusinessPhone.Fill
5. Now, what if I don’t want it to be red, unless they’ve typed something in the box, and if the box is empty, I still want it to be white? Change your formula to this one, where it checks to see if it’s blank first. Put this in the Fill property:
If(
Not(IsBlank(txtBusinessPhone.Text)),
If(
IsMatch(
txtBusinessPhone.Text,
Digit & Digit & Digit & Hyphen & Digit & Digit & Digit & Hyphen & Digit & Digit & Digit & Digit
),
White,
Red
),
White
)
6. Okay so all this does so far, is to give a visual indication that the number is in the wrong format, but so far it doesn’t stop anyone from submitting the form. To accomplish this, there are a couple of other settings to tweak. These next couple of steps are going to be different for you, depending on if your phone number needs to be a required field or not. Is it required? This means, do they *have* to fill out a phone number when they are filling out a new form, or not?
To double check… look at the card’s property called Required, you’ll see that this says “true” and there will be an asterisk next to the field on the form. This will automatically be in place if you have the column set as Required in the SharePoint list.
Notice that this is being done on the CARD, not the text box.
If this particular field IS NOT required already, do step 7, otherwise skip 7, go to 8
7. Go to the card’s property called Required, and enter this formula: Not(IsBlank(txtBusinessPhone.Text))
Everyone go to step 8
8. Select the card. Go to the property called Update. Use this formula. Basically, when the form is submitted, it will only submit this field if it matches the right pattern. Otherwise, it does not submit anything, therefore a validation error will occur.
If(
IsMatch(
txtBusinessPhone.Text,
Digit & Digit & Digit & Hyphen & Digit & Digit & Digit & Hyphen & Digit & Digit & Digit & Digit
),
txtBusinessPhone.Text
)
Now, here’s what will happen. If someone types the wrong number pattern, the fill color will show red and the usual out-of-box validation error. If the field isn’t already required and you only want it to match the pattern *if* you type something in the phone number box, then you’ll notice that the little asterisk will appear as soon as you start typing. If you don’t want it to appear, simply set the “StarVisible###” control in that card to not visible, by going to its Visible property, and changing it to false.
How will they know what the pattern is supposed to be? Hint text is a great way to do that.
Select your text box, and go to the HintText property. Type your pattern as you want people to see it as an example when filling out the form.
Another place you may want to show an example is in the tooltip. This is the text that you see pop up in white when you hover over a field while filling out the form. By default, you’ll notice that the tooltip is set to show the name of the column in SharePoint. You can type whatever you’d like here, or you can even make set it to be identical to the hint text, like this:
Again, here’s the link to the official documentation with a bunch of examples and ideas. It shows how you can do this same thing for email addresses, social security numbers, how to use RegEx, and much more.
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-ismatch
Learning PowerApps? Try my free Power Apps Basics course.
Hi, Thank you for the great post! I am new in PowerApps and have been reading many of your articles to learn about it!
I am creating a form that have a “Save button” that will start as invisible. When the person fills all the required tabs, I want to make this “Save button” visible. In this case, I will need the “Save button”to validates all the required tabs are filled in the Form and do not have any error.
I also followed all the steps in the article however when I entered more numbers in the tabs “Business Phone”, I do not get the below error message as the one that appears in your image (hope this does not affect for the formula I would need to use to validates all errors 🙂 )
Thank you in advance for the support,
Veronica
Hi Veronica, the default behavior is that when someone clicks save, it does the validation then. Then that’s when you’ll know if there are validation errors. If you have more than 2 or 3 fields in your form, your approach sounds like it would be very arduous, painful and complicated to build. Do you *really* need them to see the errors before they click save? If so, you’re looking at about 10 extra hours of work, depending on how many fields you have, and a really insane, long formula on the visible property of the save button.
Pingback: PowerApps Custom Field Errors | @WonderLaura
Is there a way to get the validation not to run until the field is exited OR when the form is saved? I’m finding that the field changes to red mid-typing, which could be confusing to users.
For text boxes, there is a property called DelayOutput, which, when set to true, it waits a couple of seconds before sending what they’re typing. That may help. Otherwise, create a variable that gets set when the form is saved, to do your validation. But if it gets saved and then you navigate off the form, you’d never know about the error. The logic you should use, will be different then, depending on if your field is a required field, and what you want to happen when people type the wrong information and try to submit it. Actually, you don’t have to do the part with the red background at all.
That part of the blog post that mentions the “Update” property… that’s the logic that runs when someone submits the form.
Yet another great article Laura. Thanks for posting it. I’m trying to do something very similar to this but can’t seem to figure out the pattern matching. I want to have a field that is a maximum of 20 characters, they can only type in upper case letters and there can be no spaces. I’ve done several Google searches but just can’t seem to find a solutions. Any suggestions?
Hi Kurt,
In the card’s “Update” property, you can control what exactly gets submitted to SharePoint on submit. On that card, you can use a function called “Upper”, which will convert what they typed to uppercase. You can also use the trim function to remove all spaces. Then, there’s a setting in SharePoint on each text field, to say how many max characters you want it to have, too, and there’s a property on the card in PowerApps, too, called MaxLength.
what if system should automatically enters ‘-‘ properly. user only enters numbers. How to achieve this
I don’t know.
Hi Laura,
I am creating a form that requires account validation before the request is submitted. You article is very informative but I am still struggling to achieve the desired result. I modified the update function on the appropriate data card but the form still allows incorrect information to be submitted. Is there any way to prevent submission until the validation error is addressed and corrected? I tried the IsMatch function but keep getting a syntax error.
Thanks in advance,
Kristi
Thanks Laura for this post. needed to validate a field and this told me exactly what was needed.
How can I make large text more readable in power apps
I’m not sure what you mean by “more readable”. Just making it larger doesn’t make it more readable?
Just wondering the best way to capture submission errors. For example I have required fields, if user submits the form it displays “An entry is required or has an invalid value. Please correct and try again’ This means the user has to flick through the form to find out what they have missed.