Form Validation in Power Apps — Part 2

In this blog, we will implement the following validation on our Sign Up Form in PowerApps:

1. Disable Sign Up button if any invalid input is present in Form.
2. Change Border or Fill Color Input which is invalid.

Before moving forward please check out my previous blog because this blog is a continuation of my previous blog. Click Here

Disable Sign Up button if any invalid input is present in Form

1. Select the Sign-Up button in the form.

2. Select the property DisplayMode so that we can change Display Mode to disable if any invalid input is entered on Form

3. Add the following to in DisplayMode Formula Bar

If(ErrorText.HtmlText = “”,Edit,Disabled)

It means that when Error Text is empty it will enable the submit button or else it will disable it.

Change Border or Fill Color Input which is invalid.

Now we will add function in Fill and border to input if that input is Invalid.

Email Input

1. Select the Email Input and choice BorderColor Property.

2. Now, In BorderColor we will add the following code in the formula bar, so if Email Input is invalid or not in the format it will change the border color of input to red or you can add whatever color you want.

3. Code :

If(Not(IsBlank('Email Address')),
    If(
        IsMatch(
        'Email Address'.Text,
        Match.Email
    ),
    RGBA(240,240,240,1),
    RGBA(255,0,0,1)
    ),
   RGBA(255,0,0,1)
)

4. You can see in the following screenshot when an email is invalid or empty then the input border is red.

Password and Confirm Password Input

1. Select the Password Input and choice BorderColor Property

2. Now, In BorderColor we will add the following code in the formula bar, so if Password value doesn’t match with Confirm Password Input it will change the border color of input to red.

3. Code

If(
    Not(IsBlank(Password)),
    If(
        'Confirm Password'.Text = Password.Text,
    RGBA(240,240,240,1),
    RGBA(255,0,0,1)
    ),
   RGBA(255,0,0,1)
)

4. You can see in the following screenshot when password / confirm password does not match or empty then the input border is red

5. For Confirm password Field you can follow the same step as Password Field

Phone Number Input

1. Select the Phone Number Input and choice BorderColor Property

2. Now, In BorderColor we will add the following code in the formula bar, so if Phone Number Input is invalid or not in the format it will change the border color of input to red.

3. Code

If(
    Not(IsBlank('Phone Number')),
    If(
        IsMatch('Phone Number'.Text, "^[6-9]\d{9}$"),
        RGBA(240,240,240,1),
    RGBA(255,0,0,1)
    ),
   RGBA(255,0,0,1)
)

4. You can see in the following screenshot when phone no is invalid or empty then the input border is red.

Here we finish with our blog, I hope this helps a lot and stay tuned for more blog like this.

Thank you