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.