Phone number and email validation in PowerApps

Phone number and email validation in PowerApps

No comments

 5,520 total views,  11 views today

In this article, we will learn about how to validate the phone number/mobile number and email ID in the PowerApps canvas app. The data validation is very much essential in any programming language before users submit the data – so it is recommended to validate your data on the client-side before it goes through to the data source – otherwise, we will end up with the hazard unformatted data.

We can validate any type of data in PowerApps, however, in this demo, we will only focus on the very essential data mobile number and email which generally very much used in any of the data entry forms.

We assume that we have a SharePoint list with the mobile number and Email ID text type column, then we will design the form step by step.

How to add form control in PowerApps Canvas App?

To add the form control in PowerApps Canvas App – click on the insert menu, then select the Edit or Display form from the forms selection dropdown list.

How to add form control in PowerApps Canvas App?
How to add form control in PowerApps Canvas App?

Then add the SharePoint data source to the form, read this article on how to connect to a SharePoint Site from the PowerApps Canvas app?

We assume that the Mobile Number & Email ID validation form is ready and which is connected to the SharePoint Contact Information list.

The next step is to make the Mobile Number & Email ID field as required, in order to do this, we need to click on the “Unlock to change properties” link from the advanced tab of the selected data card field from the form. Here we have done for the mobile number and Email ID column.

Unlock to change properties in PowerApps Canvas app
Unlock to change properties in PowerApps Canvas app

Next, make the mobile number & Email ID the required column.

Select the mobile number field and make the “Required” property as “true”, follow the same for the email id column to be required.

How to make PowerApps field property as required?
How to make PowerApps field property as required?

Now verify that Mobile Number and Email ID fields are required – to do this, just run the app in preview mode and click on the submit button, then we can see the validation message “An entry is required or has an invalid value. Please correct and try again.”

Required field validation test in PowerApps canvas app
Required field validation test in PowerApps canvas app

In the coming section, we learn how to validate the mobile number and email id from the canvas app.

Mobile number validation in PowerApps Canvas app

In this validation, we will show how to validate mobile numbers in PowerApps form, generally, in mobile number validation it should only allow ten digits numeric value – other than a number, the validation will fail.

To validate the Mobile Number field in PowerApps, select the mobile number field, and in the “OnChange” event write the below formula:

If(
Not(IsMatch(txtMobileNumberDataCardValue5.Text, "\d{10}")) && !IsBlank(txtMobileNumberDataCardValue5.Text),
Notify("The Phone number you typed is not valid, please re-type again. The format is xxxxxxxxxx", NotificationType.Error); Reset(txtMobileNumberDataCardValue5)
)
Mobile number validation formula in PowerApps
Mobile number validation formula in PowerApps

Email ID validation in PowerApps Canvas app

In this validation, we will show how to validate the Email ID in the PowerApps form, generally, in the Email ID validation, it should only allow the email ID in the email format, that is YourEmailID@emaildomain.com, other than this nothing will allow to entering.

To validate the Email ID field in PowerApps, select the Email ID field, and in the “OnChange” event write the below formula:

If(
!IsMatch(
txtEmailID_DataCardValue6.Text,
Email
),Notify("The Email ID you typed is not valid, please re-type again. The format is your_email@domain.com", NotificationType.Error); Reset(txtEmailID_DataCardValue6))

 

Email ID validation formula in PowerApps
Email ID validation formula in PowerApps

Phone Number or Mobile Number validation demo

Now just run the app in preview mode and enter some alphanumeric values to the mobile number field, then we will see the validation message “The Phone number you typed is not valid, please re-type again. The format is xxxxxxxxxx” which is nothing but 10 digits numeric value.

Phone number validation demo in PowerApps
Phone number validation demo in PowerApps

Email ID validation demo

Similarly, let’s validate the email id.

Enter some plain text without the email id format in the Email ID field, then we will see the validation message “The Email ID you typed is not valid, please re-type again. The format is your_email@emaildomain.com”.

Email ID validation demo in PowerApps
Email ID validation demo in PowerApps

Successful Phone Number and Email ID validation in PowerApps

Now, format or enter the value in expected ways in the mobile number and email id field, then we cannot see any validation message – that means now the data is valid and the form is ready to submit.

Successful Phone Number and Email ID validation in PowerApps
Successful Phone Number and Email ID validation in PowerApps

Navigate to success screen on successful form submission in PowerApps

In PowerApps submit button OnChange (click event) event, generally, we write the function SubmitForm(FormToBeSubmitted) – then we write the Navigate function to navigate to successful screen, Navigate(ScreenTobeNavigated)  – here the problem is whether the form gets successfully submitted or not, but the user will be navigated to the successful screen which is not correct.

In order to avoid this issue – we need to write the same Navigate(ScreenTobeNavigated) function but in the submit button onClick event. In the form itself, there is an “onSuccess property where we need to write the Navigate(SuccessfulScreen) function, in this approach the form will be navigated to the successful screen only if the form gets submitted to the data source.

PowerApps OnSuccess event to navigate to successful screen
PowerApps OnSuccess event to navigate to successful screen

Summary: What we had here?

Thus, in this article, we have learned the below with respect to validating the phone number/mobile number and Email ID:

  • How to validate the phone number / mobile number in the PowerApps Canvas app.
  • How to validate the email ID in the PowerApps Canvas app.
  • How to use the submit form function in the PowerApps submit form button.
  • How to use the PowerApps “onSuccess” event to navigate to the successful screen.
  • How to use the Navigate function in the PowerApps canvas app.
  • How to do the “Unlock to change properties” in the PowerApps Canvas app.
  • How to use PowerApps IsMatch email?
  • How to use Notify function in PowerApps?

See Also

You may also like the below PowerApps articles:

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:


Buy SharePoint Online & Office 365 Administration eBook