Validating User Inputs in Forms

Loading

Validating User Inputs in Forms in Power Apps – A Complete Guide

📌 Introduction

User input validation is crucial in Power Apps to ensure data integrity and prevent incorrect or incomplete data submissions. Without proper validation, users may submit invalid, empty, or duplicate data, which can lead to data inconsistency or errors.

Power Apps provides multiple methods for validating inputs in forms, including:
Required field validation (checking for empty values)
Format validation (email, phone number, dates, numbers, etc.)
Length validation (minimum and maximum character limits)
Real-time validation (showing error messages as users type)
Submit-time validation (blocking submission if validation fails)

In this guide, we’ll explore how to:
🔹 Validate required fields before form submission
🔹 Check email, phone number, and numeric inputs
🔹 Implement validation messages and error handling
🔹 Disable submit buttons until valid data is entered


🔹 Step 1: Setting Up a Basic Form

Before applying validation, create a simple form.

✅ Example: Employee Registration Form

Insert the following controls in Power Apps:
1️⃣ Text Inputs → Name (txtName), Email (txtEmail), Phone (txtPhone)
2️⃣ Dropdown → Position (drpPosition)
3️⃣ Button → Submit (btnSubmit)
4️⃣ Labels → Error messages (lblErrorName, lblErrorEmail, lblErrorPhone)


🔹 Step 2: Validating Required Fields

Ensure that users do not leave fields empty before submitting the form.

✅ Example: Checking If Name Field is Empty

Set the Visible property of lblErrorName to:

IsBlank(txtName.Text)

🔹 This will show the error label when the Name field is empty.

✅ Example: Preventing Submission with Empty Fields

Set the DisplayMode property of the Submit button (btnSubmit) to:

If(
    IsBlank(txtName.Text) || 
    IsBlank(txtEmail.Text) || 
    IsBlank(txtPhone.Text),
    DisplayMode.Disabled,
    DisplayMode.Edit
)

📌 How it Works:
✔ If any field is empty, the Submit button remains disabled.
✔ Once all fields are filled, it becomes clickable.


🔹 Step 3: Validating Email Format

Ensure that users enter a valid email address.

✅ Example: Checking Email Format

Set the Visible property of lblErrorEmail to:

!IsMatch(txtEmail.Text, "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$")

📌 Behavior:
✔ Shows error if the email format is incorrect.
✔ Disappears when a valid email is entered.


🔹 Step 4: Validating Phone Number Format

Ensure phone numbers contain only digits and are of correct length.

✅ Example: Checking for Numeric Input

Set the Visible property of lblErrorPhone to:

!IsMatch(txtPhone.Text, "^\d{10}$")

📌 Behavior:
✔ Shows error if the phone number is not exactly 10 digits.


🔹 Step 5: Setting Character Limits

Ensure inputs do not exceed or fall below the required number of characters.

✅ Example: Limiting Name Length to 5-50 Characters

Set the Visible property of lblErrorName to:

Len(txtName.Text) < 5 || Len(txtName.Text) > 50

📌 Behavior:
✔ Shows error if the name is less than 5 or more than 50 characters.


🔹 Step 6: Displaying Validation Messages Dynamically

Instead of separate labels, combine messages into one.

✅ Example: Showing Multiple Errors in One Label

Set the Text property of lblErrorGeneral to:

If(
    IsBlank(txtName.Text), "Name is required. ", 
    If(!IsMatch(txtEmail.Text, "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"), "Invalid Email. ", 
    If(!IsMatch(txtPhone.Text, "^\d{10}$"), "Phone must be 10 digits.", ""))
)

📌 Behavior:
✔ Displays multiple errors in a single label dynamically.


🔹 Step 7: Validating Input in Real-Time

Change the BorderColor of fields when input is invalid.

✅ Example: Highlighting Invalid Fields

Set the BorderColor property of txtEmail to:

If(
    !IsMatch(txtEmail.Text, "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"),
    Red,
    Black
)

📌 Behavior:
✔ Turns the border red when the email is invalid.


🔹 Step 8: Preventing Invalid Submissions with Patch()

Modify the OnSelect property of the Submit button:

If(
    IsBlank(txtName.Text) || 
    !IsMatch(txtEmail.Text, "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$") || 
    !IsMatch(txtPhone.Text, "^\d{10}$"),
    Notify("Please fix errors before submitting.", NotificationType.Error),
    Patch(
        EmployeeRecords,  
        Defaults(EmployeeRecords),  
        {
            Name: txtName.Text,  
            Email: txtEmail.Text,  
            Phone: txtPhone.Text,  
            Position: drpPosition.Selected.Value
        }
    );
    Notify("Record submitted successfully!", NotificationType.Success)
)

📌 How it Works:
If validation fails → Shows an error message.
If validation passes → Submits data using Patch().


🔹 Step 9: Resetting Fields After Successful Submission

Clear input fields after successful submission.

✅ Example: Resetting Form Fields

Reset(txtName);
Reset(txtEmail);
Reset(txtPhone);
Reset(drpPosition);

📌 Behavior:
✔ Clears all input fields after submission.


🔹 Step 10: Best Practices for Validating User Inputs

Use IsBlank() to check required fields.
Use IsMatch() for validating formats (emails, phone numbers).
Use Len() to enforce character limits.
Use Notify() to give users real-time feedback.
Disable the Submit button until all inputs are valid.
Use dynamic error messages to improve user experience.
Reset() fields after successful submission.


🔹 Conclusion

Validating user inputs in Power Apps ensures clean, accurate, and reliable data. By implementing real-time validation, error messages, and proper input restrictions, you improve both user experience and data integrity.


Leave a Reply

Your email address will not be published. Required fields are marked *