Power Apps Form field validation on submit [Email, Phone Number, Date & Text]

In this Power Apps tutorial, we will discuss Power Apps form field validation on submit with examples. We will see, how to validate the email id field, phone number field, and date field in a Power Apps form.

With Power Apps, you can validate data cards using various methods to ensure that the entered data matches particular requirements. We can improve the durability and accuracy of your Power Apps solution by validating data cards. Validating data cards ensures that the data provided by users corresponds to specific rules or standards.

Recently, we are working with a Business Consultation App using Power Apps Canvas app based on Power Apps CRUD operation where users can create, read, update, and delete a consultation.

While working on that app, we got a requirement to validate the data card as per specific restrictions. To match the need, I modified the app by adding expressions to check the email data card, date field, number field, and so on.

Additionally, I have added another expression for the save button, which will check if any of the inserted values are invalid then the button will appear as disable mode; otherwise, it will allow saving the data to the data source.

Using step-by-step guidance, we will explore how to verify fields such as email validations, mobile number field validations, date field validation, and so on within a Power Apps form in this Power Apps lesson.

Along with this, we will do Power Apps form validation as well as submit button validation.

Power Apps Data validation

Let’s start with different data validation within the Power Apps edit form. Before that, we will build a local or context variable on the screen’s OnVisible property to store the fields’ values. To build this, the following steps are:

• On the Power Automate screen (where the edit form is placed), insert the below expression on the screen’s OnVisible property to create an update context variable.

OnVisible = UpdateContext(
    {
        lconValidation: {
            EmailAddress: false,
            PhoneNumber: false,
            ConsultationDate: false,
            CurrentAddress: false
        }
    }
);

Where,

• lconValidation: Name of the update context variable
• EmailAddress, PhoneNumber, ConsultationDate, and CurrentAddress are the name of the variables whose values are set as false.

Power Apps form field Validation

Here, we will see different types of forms’ fields validation in Power Apps with a step-by-step guide. Follow the guide carefully.

Power Apps Email field Validation

In this case, we will see how to validate an email address field within the Power Apps edit form. That is when the user inserts their email address, it will check whether the email is valid or not. Also, it will display an error message with a cross icon to instruct the user to insert a valid email address.

To work with this, insert the following steps as below:

• On the Power Apps edit form, select the email data card and unlock it for later modification.
• Insert the below expression on the Color property of the email’s text input control.

Color = If(
    IsMatch(
        EmailDataCardValue.Text,
        Match.Email
    ),
    Color.Black,
    Color.Red
)

Where EmailDataCardValue is the name of the text input control of the email data card. As per the above expression, it will check whether the inserted mail address is valid or not.

That is if the mail address doesn’t contain ‘@‘ or ‘.‘ then it will change the color of the inserted mail address.

Now, we can see that when we insert an invalid email address it will change the text color as shown below:

• Next, add an icon (initially, you can add any icon) to the email Datacard and insert the below expression on the icon’s Icon property.

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

Where EmailDataCardValue is the name of the email data card’s text input control.

As per the above expression, if the inserted email is valid, then a check icon will be visible otherwise a cancel icon will be visible.

• Insert the expression below on the icon’s color property. If the email is valid, this will turn the color of the icon to green; otherwise, it will be red.

Color = If(
    Self.Icon = Icon.Check,
    Color.Green,
    Color.Red
)

• Similarly, insert the below expression on the icon’s visible property to make it visible when an email address is inserted.

Visible =lconValidation.EmailAddress

Where IconValidation is the name of the context variable that we have created at the beginning and EmailAddress is the name of the variable name.

• Next, we will insert the below expression on the Text Input’s OnChange property. As a result, the icon will appear only after the user has inserted the email in Email’s text input and left the field.

OnChange = UpdateContext(
    {
        lconValidation: Patch(
            lconValidation,
            {EmailAddress: true}
        )
    }
);

• An error message will appear when the user inserts an invalid email address. For that, add a text label to that email data card and place it under the email’s text input control. (Or, you can use the default error message text label that is available on each data card)
• Insert the below text on the text label’s text property as an error message.

Text = "Insert a valid email address with @ ."

• Again, insert the below expression on the error message’s Visible property.

Visible = Email_Icon.Icon=Icon.Cancel And Email_Icon.Visible

Where Email_Icon is the name of the icon that we have used for the email validation.

That’s it. Let’s save and preview the app. We can see that when we insert an invalid email address, it will display the error message as well as the cross icon. But, when we insert a valid email address, it will display only the check icon as shown below:

This is how to validate a Power Apps form email address.

Power Apps form Text field Validation

By following the above-mentioned steps, we will see how to validate a text field within a Power Apps edit form.

As per the validation, the user must need to insert the data within the text field i.e., Current Address data card. If the user does not insert any data, then it will display a cross icon with an error message to insert the current address.

To implement this scenario, the following steps are:

• On the Power Apps edit form, do unlock the Current Address data card.
• Add an icon to the address datacard and place it beside the text input control.
• Insert the below expression on the icon’s Icon property.

Icon = If(
    !IsBlank(CurrentAddressDataCardValue.Text),
    Icon.Check,
    Icon.Cancel
)

Where CurrentAddressDataCardValue is the name of the current address data card’s text input control.

• Similarly, insert the below expression on the icon’s Color property to customize the icon’s color based on the icon’s appearance. That is, if it is a check icon then it will appear in green color; otherwise it will appear in red color.

Color = If(
    Self.Icon = Icon.Check,
    Color.Green,
    Color.Red
)

• Next, on the icon’s Visible property, enter the expression shown below. As a result, the icon will only be shown if the user leaves the address field blank.

Visible = lconValidation.CurrentAddress

• Similarly, to notify the user via an error message, add the below text on the error message’s Text property:

Text = "Please Insert the current address"

• Again, insert the below expression on the Visible property of the error message text label.

Visible = CurrentAddress_Icon.Icon = Icon.Cancel And CurrentAddress_Icon.Visible

As per the above expression, the error message will visible only when the cancel icon will appear.

That’s it! Let’s preview the app and we can see if we left the field blank then it will display the cancel icon with the error message; otherwise it will display a check icon.

This is how to validate a text input field in Power Apps edit form.

Power Apps form Phone number Validation

By using the above procedure, we will see how to validate a phone number within a Power Apps form.

The validation will determine whether or not the inserted phone number is a ten-digit number. If the phone number entered is incorrect, a cross icon will show along with an error message. The number is also highlighted in red.

To implement this procedure, the following steps are:

• On the above Power Apps edit form, unlock the Phone Number data card and insert the below expression on the Color property of the Phone data card’s text input control.

Color = If(
    IsMatch(
        PhoneNumberDataCardValue.Text,
        "\d{10}"
    ),
    Color.Black,
    Color.Red
)

Where PhoneNumberDataCardValue is the name of the phone DataCard’s text input control.

As per the expression, it will check whether the inserted number is 10 digits or not. If the condition will not match, the number will appear in red color.

• Now, add any icon (Ex: Check icon) to that Datacard and place it beside the text input control of the Phone number data card.

• To validate the number field based on the icon, insert the below expression on the Icon’s Icon property.

Icon = If(
    IsMatch(
        PhoneNumberDataCardValue.Text,
        "\d{10}"
    ),
    Icon.Check,
    Icon.Cancel
)

Where PhoneNumberDataCardValue is the name of the phone number data card.

• To change the color of the icon based on the valid phone number, insert the below expression on the icon’s color property.

Color = If(Self.Icon = Icon.Cancel, Color.Red, Color.Green)

• To make the icon visible when a phone number is inserted, add the below expression on the icon’s visible property.

Visible = lconValidation.PhoneNumber

• Next, we will insert the below expression on the Text Input’s OnChange property. As a result, the icon will appear only after the user has inserted the number in the Phone Number’s text input and left the field.

OnChange = UpdateContext(
    {
        lconValidation: Patch(
            lconValidation,
            {PhoneNumber: true}
        )
    }
);

• To display an error message on an invalid phone number, add a text label to that phone number data card and place it under the phone’s text input control. Insert the below text in the text label’s Text property as an error message:

Text = "Phone number should be 10 digit"

• Insert the following expression on the error message’s Visible property again.

Visible = Phone_Icon.Icon=Icon.Cancel And Phone_Icon.Visible

That’s all. Let us save and test the app. When we enter an invalid phone number, we can see that the error message and the cross icon appear. When we enter a valid phone number (i.e., 10 digits of the Phone number), however, it immediately displays the tick icon, as shown below:

This is how to validate a Power Apps phone number via color property.

PowerApps form Date Validation

Here, we will see how to validate a date input within a Power Apps form.

That is, if a user enters a past date or a weekend day (Saturday or Sunday), the date will be highlighted in red, along with a cross icon and an error message. In addition, if the user selects the current day, the form will prompt the user to pick a future date for consultation. As a result, the date picker can only accept dates in the future.

To work with the above Power Apps date validation, the following steps are:

• Unlock the above Consultation Date data card within the Power Apps edit form.
• Select the Power Apps date picker control of the Consultation Date data card and insert the below expression on the date picker’s Color property.

Color = If(
    Weekday(
        ConsultationDateValue.SelectedDate,
        StartOfWeek.Monday
    ) <= 5 And ConsultationDateValue.SelectedDate > Today(),
    Color.Navy,
    Color.Red
)

Where ConsultationDateValue is the name of the date picker control.

• To display the current date as the default date, I have inserted the below expression on the date picker control’s DefaultDateproperty.

DefaultDate = Today()

• Next, add any icon (Ex: Check icon) to the Consulation Date Datacard and place it beside the date picker control.

• To check the selected date based on the icon, insert the below expression on the Icon’s Icon property.

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

• To change the icon’s color based on the valid phone number, insert the following expression on the icon’s color property.

Color = If(
    Self.Icon = Icon.Cancel,
    Color.Red,
    Color.Green
)

• To make the icon visible when a date is picked, add the below expression on the icon’s visible property.

Visible = lconValidation.ConsultationDate

• Next, we will insert the below expression on the date picker’s OnChange property. As a result, the icon will appear only after the user has picked a date for the consultation and left the field.

OnChange = UpdateContext(
    {
        lconValidation: Patch(
            lconValidation,
            {ConsultationDate: true}
        )
    }
);

• To display an error message on an invalid phone number, insert the below text in the text label’s Text property as an error message:

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

• Insert the following expression on the error message’s Visible property again. So that, the error message only will be visible when the picked date does not match the condition.

Visible = ConsultantDate_Icon.Icon=Icon.Cancel And ConsultantDate_Icon.Visible

That’s it! When we picked a past date or weekend date or current date, the form will not accept the date; but, in the future date the form will accept the date as shown below:

This is how to validate a date column within the Power Apps edit form.

Power Apps form validation on button submit

Finally, we will see how to validate a Power Apps form on button submit.

As per the requirement, the user can submit the form only when the form is valid. If any of the field is invalid, then the submit button will not allow you to submit the Power Apps form.

For this, we have inserted a button to the form and inserted the below expression on the button’s OnSelect property:

OnSelect = If(
    Form1.Valid,
    SubmitForm(Form1) & NewForm(Form1) & Navigate('Consultancy Details Screen') & Notify(
        "Your Business Consultation Process is successfully submitted.",
        NotificationType.Success
    ),
    Notify(
        "Please fill the required fields",
        NotificationType.Error
    )
);

Where Form1 is the name of the Power Apps edit form.

In addition, add the following phrase to the button’s displaymode property. As a result, if any of the fields is invalid, the button will display in disable mode; otherwise, it will appear in edit mode.

DisplayMode = If(
    Or(
        PhoneNumberDataCardValue.Color = Color.Red,
        EmailDataCardValue.Color = Color.Red,
        ConsultationDateValue.Color = Color.Red,
        IsBlank(CurrentAddressDataCardValue.Text) = true
    ),
    DisplayMode.Disabled,
    DisplayMode.Edit
)

That’s all! Now you may publish the app and launch it in preview mode. We can see that if any of the fields are not valid, the button will be disabled. When we enter valid data into the fields, the form will be highlighted and we will be able to save the data.

Note: Make sure to insert data in required or mandatory fields before submitting the form. Otherwise, PowerApps display an error notification to fill the required fields.

This is how to validate a Power Apps edit form.

You might be interested in the following most-searched Power Apps tutorials:

• Power Apps Pie Chart- Let’s Build It
• Power Apps Column Chart – How to Build it
• Power Apps Chart Control – Complete tutorial with examples
• Power Apps Camera Control: Save Images to SharePoint
• Power Apps Rich text editor control – How to use

Conclusion

From this Power Apps tutorial, we have learned all about Power Apps Form field validation on submit.

• How to validate a Power Apps email data card?
• How to validate a Power Apps phone number data card based on color?
• How to validate a Power Apps phone number data card based on an icon?
• How to validate a Power Apps date data card within an edit form?