Power Apps Form Validations: 9 Useful Examples

I developed an Event Registration application in Power Apps a few days before. There, users need to submit their details in the form to create a new account. To avoid duplicate data and collect valid information from the user, we were required to apply validations on the Power Apps forms.

In this article, I will explain how to validate the fields in the Power Apps form before submission.

How to Validate a Power Apps Form Before Submission

Here, I will explain how to apply validations for the fields preset in the Power Apps form, like full name, email, phone number, etc. These validations will help fetch valid information from the users and avoid duplicate data.

Here, I have a SharePoint list named Event Registration Form, which stores the data entered in the Power Apps form.

This list has the following columns, along with data types.

Column Name	Data Type
User ID	Title
Full Name	Single line of text
Password	Single line of text
Email Address	Single line of text
Phone Number	Single line of text
Age	Number
Department	Choice(IT, HR, Marketing,Sales)
Job Title	Single line of text
Company Name	Single line of text
Registration Date	Date & Time
Comments	Multiple lines of text

Let’s see the validations for Power Apps form data validation example-wise!

Power Apps Full Name Field Validation

Look at the example below; on the full name, if I’m trying to provide special characters or numbers, an error message will be displayed. The border color of the full name field was also changed to red.

Follow the steps below to achieve this!

1. Provide the below formula in the OnChange property of the Full Name field in the Power Apps form.

If(
    IsBlank(Self.Text),
    UpdateContext({IsFirstNameInvalid: false}),
    UpdateContext(
        {
            IsFirstNameInvalid: !IsMatch(
                Self.Text,
                "^[a-zA-Z\s]+$"
            )
        }
    )
)

Here, IsFirstNameInvalid is the local variable name.

• It holds boolean values; if the current field(Self.text) is blank, the value is false.
• If the text contains any special characters or numbers, then it holds true value.

2. Provide the below code on the full name fields Border Color property!

If(
    IsBlank(FullName_value.Text),
    Parent.BorderColor,  
    If(
        IsFirstNameInvalid,  
        RGBA(168, 0, 0, 1), 
        Parent.BorderColor   
    )
)

Here, FullName_value is the control name; like above, we can also take Self.Text.

• If the control is blank, then the parent border color will apply.
• if IsFirstNameInvalid value is true then reg color(RGBA(168, 0, 0, 1)) will be apply.
• Otherwise, the parent border color only applies.

3. Provide the below codes on the given properties of the error message label present in the full name data card.

Text = If(IsFirstNameInvalid, "Full Name cannot contain numbers or special characters", " ")
Visible = If(!IsBlank(FullName_value.Text), IsFirstNameInvalid)

On the Text property, the formula describes if the IsFirstNameInvalid value is true, then it displays an error message; otherwise, it is an empty string.

On the Visible property, the formula describes that if the full name field is not empty and the text does not match the given validation, it will display; otherwise, it will not.

Or

Look at the image below; if you want to display icons for the above validation, follow the steps below!

1. Add any icon in the full name field in the Power Apps form; add the code below in its Icon property.

If(IsBlank(FullName_value.Text),Icon.Check,If(IsFirstNameInvalid,Icon.Cancel,Icon.Check))

• The Check icon will be visible if the full name field is blank or not blank. Also, the entered text satisfied the validation.
• The Cancel icon will be visible if the text entered in the full name does not satisfy the validation.

2. Add the code below to the Color property of the icon to change colors!

If(IsBlank(FullName_value.Text),RGBA(141,198,63,1),If(IsFirstNameInvalid,RGBA(168,0,0,1),RGBA(141,198,63,1)))

• If the field is blank, the green [RGBA(141,198,63,1)] color will be applied, and If the entered text satisfies the validation.
• If not satisfied, red [RGBA(168,0,0,1)] color will be applied.

Save changes and preview the app; when the validation doesn’t match, the icons will be changed like in the above example.

Validate User ID Field in Power Apps

Look at the image below; here, I’m validating the User ID field; if it is already present in the data source, it will display an error message. Also, if it is not started with the prefix “TS0”, an error will be displayed.

Follow the steps below to achieve this!

1. Add the below formula in the OnChange property of the User ID field.

UpdateContext(
    {
        IsUserIDExists: !IsEmpty(
            Filter(
                'Event Registration Form',
                Title = UserID_Value.Text
            )
        ),
        IsUserIDFormatValid: StartsWith(
            UserID_Value.Text,
            "TS0"
        )
    }
)

Here,

• IsUserIDExists local variable checks whether the entered userid exists in the SharePoint list [ ‘Event Registration Form’ ].
• IsUserIDFormatValid local variable checks the User ID starts with the prefix “TS0.”

2. Provide the below code on the Border Color property of the User ID field.

If(!IsUserIDFormatValid||IsUserIDExists,RGBA(168,0,0,1), Parent .BorderColor)

If any variables give a true value, the red color will be applied to the border; otherwise, the parent border color will be applied.

3. Provide the formulas below for the given properties for the error message label in the User ID data card.

Text = If(!IsUserIDFormatValid,"UserID must start with 'TS0'.",If(IsUserIDExists,"UserID already exists."," "))

Visible = If(IsUserIDExists || !IsUserIDFormatValid, true , false )

If the UserID is not started with the “TS0” prefix on the Text property, it displays an error message. Also, another error message will be displayed if the User ID already exists in the data source.

Save the changes and preview the app; it displays an error if the user ID already exists and it is not matched.

Power Apps Validate Password Field

Here, we’ll discuss validating a password field in Power Apps. Look at the image below; if the password does not include lowercase and uppercase letters, special characters, or numbers and is not between 8 to 15 characters in length, an error message will be displayed.

Follow the steps below to achieve this!

1. Add the below code on the OnChange property of the password field in the Power Apps form.

UpdateContext({
    IsPasswordValid: If(
        IsMatch(DCV_Password.Text, "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+}{'\';:\/?.>,<])(?!.*\s).{8,15}$"),
        false,
        true
    )
})

In the above code,

• The IsMatch() function matches the provided text in the password field with the regex and returns a boolean value.
• The regex contains lowercase letters [a-z], uppercase letters [A-Z], and special characters.*[!@#$%^&*()_+}{‘\’;:\/?.>,<], digits *\d but won’t allow spaces (?!.*\s).
• It also includes only {8,15} characters in length.
• The IsMatch() function value output is stored in the IsPasswordValid variable.

2. Add this code to the Border Color property in the password field.

If(IsBlank(DCV_Password.Text),Parent.BorderColor,If(IsPasswordValid,RGBA(168, 0, 0, 1),Parent.BorderColor))

If the password field is blank, Parent.BorderColor will be applied. If the password does not match the pattern we provided, a red color will be applied if the parent border color will be applied.

3. Provide the formulas below for the properties of the error message label in the password data card.

Text ="Password must be 8-15 characters,with combination lowercase, uppercase, digits and special characters."

Visible =If(IsBlank(DCV_Password.Text),false,IsPasswordValid)

If the password field is blank, the error message won’t display; an error message will be displayed if the password doesn’t match the given pattern.

Save the changes and preview the app; it displays an error if the entered password doesn’t match with the given regex.

OR

Look at the image below; if you want to display icons for the above validation, follow the steps below!

1. Add any icon into the password field and provide the below code on its Icon property.

If(IsBlank(DCV_Password.Text),Icon.Check,If(IsPasswordValid,Icon.Cancel,Icon.Check))

If the password field is blank, then the Check icon will be visible, and if the entered password doesn’t match the password pattern, then the Cancel icon will be visible.

2. Add the below code to the Color property of the icon.

If(IsBlank(DCV_Password.Text),RGBA(141,198,63,1),If(IsPasswordValid,RGBA(168, 0, 0, 1),RGBA(141,198,63,1)))

Power Apps Email Field Validation

We’ll see the validating email field in the Power Apps form here. Look at the image below. An error message will be displayed if I do not follow the email pattern.

Follow the steps below to achieve this!

1. Add the below code to the OnChange property of the email field in the form.

UpdateContext(
    {
        IsEmailValid: If(
            IsMatch(
                DCV_Email.Text,
                "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
            ),
            false,
            true
        )
    }
)

2. Add the code below to the BorderColor property of the email field.

If(IsEmailValid,RGBA(168,0,0,1),Parent .BorderColor)

3. Provide the formulas below for the properties of the error message label in the email field.

Text = "Please enter a valid email address"
Visible = IsEmailValid

Save the changes and preview the app; you’ll see an error message if you do not follow the email pattern.

OR

To display icons while validating the email fields, like in the example below, follow the steps below!

1. Add one icon to the email field and provide the below code to its icon property.

If(IsEmailValid,Icon.Cancel,Icon.Check)

2. To add colors to those icons, provide the below formula to the Color property of the icon.

If(IsEmailValid,RGBA(168,0,0,1),RGBA(141,198,63,1))

Power Apps Phone Number Field Validation

Let’s see how to validate the phone number field in the Power Apps form. The example below displays an error message if it does not follow the phone number pattern.

Follow the steps below to achieve this!

1. Add the code below to the OnChange property of the phone number.

UpdateContext(
    {
        IsNumberValid: If( 
            IsMatch(
                PhoneNumber_Value.Text,
                "^\d{3}-\d{3}-\d{4}$"
            ),
            false,
            true
        )
    }
);

Here, the IsMatch() function checks whether the entered number in the phone number field matches [###-###-####]. in place of # digits only allowed.

2. Provide the code below to the BorderColor property of the phone number.

If(IsNumberValid && !IsBlank(Self.Text),RGBA(168,0,0,1),Parent .BorderColor)

If the IsNumberValid value is true and also the phone number field is not blank, then the red color will be applied to the border.

3. Provide the below codes to the given properties of the error message label in the phone number data card.

Text = "Phone Number must be in '###-###-####'"
Visible=IsNumberValid && !IsBlank(PhoneNumber_Value.Text)

OR

To validate the phone number with icons like in the example below, follow the steps below!

Like in the above sections, add an icon and provide the codes below for the given properties of the icon.

Color = If(IsNumberValid,RGBA(168,0,0,1),RGBA(141,198,63,1))
Icon = If(IsNumberValid,Icon.Cancel,Icon.Check)

Here, IsNumberValid contains number validation and returns boolean values based on that we’re changing the icon and the color.

Save the changes and preview the app; the icons will be changed based on the validated phone number.

Validate Age Field in Power Apps

In this section, we’ll see how to validate the age field in the Power Apps application. Like in the above examples, the error message will also be displayed if the age is less than 20.

Follow the steps below to achieve this!

1. Provide the below codes to the given properties of the age field in the form.

OnChange = UpdateContext({IsAgeValid:If(Value(Self.Text) >20,false,true)})
BorderColor =If(IsAgeValid && !IsBlank(Value(Self.Text)),RGBA(168,0,0,1),Parent .BorderColor)

2. Add the below codes to the given properties of the error message label in the Power Apps form.

Text = "Ensure your age greater than 20"
Visible = IsAgeValid && !IsBlank(DCV_Age.Text)

OR

To display the icons while validating, add an icon into the age field and provide the codes below for the given properties.

Color =If(IsAgeValid,RGBA(168,0,0,1),RGBA(141,198,63,1))
Icon = If(IsAgeValid,Icon.Cancel,Icon.Check)

Based on the IsAgeValid variable value, the icons will be displayed, and colors will applied to those icons.

Power Apps Date Fields Validation

To validate the date field, I’m using another example. Here, I have an expense report form; employees need to report their expenses on the current date and previous, not in the future, and not on the weekends. An error message will be displayed if they submit the date on weekends and future dates. Observe in the example below.

Follow the steps below to achieve this!

1. Add the code below in the Text property of the error message label’s date datacard in the Power Apps form.

If(
    DateValue(DCV_Date.SelectedDate) > Today(),
    "📅 Date cannot be in the future",
    ""
) & 
If(
    Weekday(DCV_Date.SelectedDate) = 7 Or Weekday(DCV_Date.SelectedDate) = 1,
    If(
        DateValue(DCV_Date.SelectedDate) > Today(),
        " and ",
        ""
    ) & "Please Report only on weekdays",
    ""
)

The above first condition displays an error message if the entered date is greater than the current date.

• The weekday () function returns the weekday of the given date into this function. For example, the weekday of the Sun =1, Mon = 2, etc, and Sat =7.
• So, the second condition checks if the selected dates on weekdays fall on 1 or 7, and then an error message will be displayed. If not, it checks whether the selected date is from a previous date.

Save the changes and publish it once. You can also use simple conditions according to your requirement, like the date cannot be in the future and not on weekends from the code given above.

This way, we can validate a date field in the Power Apps form.

Validate Choice Fields in Power Apps

The example below shows that an error message is displayed when the department field is empty.

Follow the below steps to add this validation to the choice field in the Power Apps form.

1. Add the code below codes to the given properties of the error message label of the department field.

Text= "Please select your department"
Visible = If(IsBlank(DCV_Dept.Selected.Value),true,false)

DCV_Dept is the department choice field name. So, this code will return true if the department field is blank.

2. Also, provide true value to the Required property of the department datacard in the form.

Required = true

Validating Multiline Text Field in Power Apps Form

Let’s see the validation for the multiple lines of the text field in the Power Apps form. Look at the image below; only the error message disappears when I provide a comment of more than 50 characters.

Follow the steps below to achieve this!

1. Add the below code to the Visible property of the error message label comments datacard.

If(Len(DCV_Comments.Text)<50,true,false)

2. Also, provide the text below on the Text property of the error message label.

"Ensure that the comment contains more than 50 characters."

Save the changes and publish the application. This way, we can easily validate the multiple lines of text field in Power Apps form.

OR

To display icons while validating, add an icon to the comments data card and provide the code below for the given properties.

Color = If(Len(DCV_Comments.Text)<50,RGBA(168,0,0,1),RGBA(141,198,63,1))
Icon = If(Len(DCV_Comments.Text)<50,Icon.Cancel,Icon.Check)

3. To submit the form details when the custom validations are satisfied, provide the below code in the OnSelect property of the submit button.

If(
    !IsFirstNameInvalid&& IsUserIDFormatValid && !IsPasswordValid && !IsEmailValid && !IsNumberValid && !IsAgeValid && Len(DCV_Comments.Text)>50,
    SubmitForm(frm_EventReg),Notify("Please validate the fields in the form and fill the required fields!",NotificationType.Error)
)

4. To reset the data we entered in the form and to reset the error message that is not required to display while submitting the form, add the code below in the OnSelect property of the reset button.

ResetForm(frm_EventReg);UpdateContext({IsFirstNameInvalid:false,IsPasswordValid:false,IsEmailValid:false,IsNumberValid:false,IsAgeValid:false})

We can submit the form details when custom validations are satisfied.

I hope you understand how to validate the form fields in the Power Apps application. Here, I explained validating fields in two different ways. You can follow any approach while validating. Also, I explained how to submit the form details when the custom validations are satisfied. If you’re a beginner to Power Apps, follow this article to validate the fields in the form control.

Also, you may like:

• Filter List Box in Power Apps
• Dynamically Display Image in Power Apps
• Power Apps Login Page Forgot Password Feature
• Power Apps Select All Checkbox in Gallery
• Power Apps Naming Conventions [Standards & Guidelines]
• Get the Dates for the Current Week in Power Apps
• Power Apps Canvas App Dashboard