In this blog, we shall discuss how we can perform custom validation in any text fields and restrict users to enter only allowed values.
Before getting into the demo, we shall know –
- What is data validation?
- What is a regular expression?
What is Data Validation?
Data validation provides accuracy, cleanness, and completeness to the dataset by eliminating data errors from any project to ensure that the data is not corrupted.
What is Regular Expression?
A regular expression (shortened as regex or regexp; sometimes referred to as rational expression) is a sequence of characters that specifies a search pattern in text. Usually, such patterns are used by string-searching algorithms for “find” or “find and replace” operations on strings, or for input validation. Regular expression techniques are developed in theoretical computer science and formal language theory.
Wikipedia
In other words, Regular Expressions are patterns used to match strings entered by users. Every programming language has variations in how they interpret regular expressions.
Demo
For the demo, I have a basic scenario where a user needs to submit his details viz. Full Name, Email & Comments. All these are text fields but email and comment will have the validation check.
Email Validation
We’ll start with the email validation –
In the above video, you can see I have used a text control for input and a label to show the error message below the text input. We’ll leverage the IsMatch() function of Power Apps.
In the email text input’s OnChange property type the below code –
If(IsMatch(Self.Text,Match.Email),UpdateContext({locEmailError:false}),UpdateContext({locEmailError:true}))- In the above line of code, we are checking if the text input’s entered text by the user matches the Email format or not.
- If the entered text matches with the email format, it will make the error variable false or else true.
Our error variable is set, and now we have to use it.
Select Email text input control and write the following code into its Border color property –
If(locEmailError,Red,Black)- In this code, we are setting the border color to red when the variable value is true.
- If the variable value is false, it will be the theme color i.e., black in my case (you can put your theme color in the else part of the function).
Error label properties for Email
Now, we will set the properties of the below label which will show a validation error/success message. On the label use the following code –
Text: If(IsMatch(txtValidationText.Text, Match.Email), "Valid Email", "Invalid Email")
Color: If(IsMatch(txtValidationText.Text,Match.Email),Green,Red)
Visible: !IsBlank(txtValidationText.Text)- In the above code, we could use the variable instead of the whole IsMatch function. But this function is giving us real-time results.
- In Text, I am showing whether the entered email is valid or invalid.
- In Color, I am showing the color red if valid and green if it is invalid.
- In Visible, it will be visible if there is any text entered.
Our email validation is ready, now jump into the next part Comments Validation.
Comments Validation
In this we’ll validate that our comment shouldn’t have any special character except dot(.), comma (,), space (), dash(-), and underscore(_). We’ll allow Alphanumeric digits.
In this step, everything will remain the same as the Email validation but there will be a few minor changes.
In the comment text input’s OnChange property and enter the below code –
If(IsMatch(Self.Text, "(^[a-zA-Z0-9-._, ]*$)"), UpdateContext({locCommentsError:false}), UpdateContext({locCommentsError:true}))- In the above line of code, we are matching the entered text with small alphabets, Capital alphabets, numeric, and a few special characters like dash (-), dot(.), underscore (_), comma (,), and space.
- If you want you can allow more special characters by just adding them next to the other special characters.
In the comments text input’s BorderColor property enter the following code –
If(locCommentsError,Red,Black)- In this code, we are setting the border color to red when the variable value is true.
- If the variable value is false, it will be the theme color i.e., black in my case (you can put your theme color in the else part of the function).
Error label properties for Comments
Now, we will set the properties of the below label which will show the validation error message.
On the label use the following code –
Text: “Special characters are not allowed.”
Color: Red
Visible: !IsBlank(txtCommentInput.Text) && !IsMatch(txtCommentInput.Text, "(^[a-zA-Z0-9-._, ]*$)")Save Button
After setting up our controls we’ll finally validate the error before submitting the data in the Save button.
The following code will be set to Submit button –
If(
locEmailError || locCommentsError,
Notify(
"Unable to save the data. Please check if any error exists.",
Error
),
Patch(
'User Comments',
Defaults('User Comments'),
{
'Full Name': txtFullNameInput.Text,
Email: txtEmailInput.Text,
Comments: txtCommentInput.Text
}
);
Notify(
"Response Submitted",
Success
);
Reset(txtFullNameInput);
Reset(txtEmailInput);
Reset(txtCommentInput)
)- The above code checks if there is any error in emails or comments with the value of the variable being true.
- If it finds any data validation error it shows the user an error message and breaks the function.
- If there is no data validation error, it proceeds to patch the user data into the data source.
- After patching it shows the user a success message that the response submitted.
- After the success message, it resets the text controls.
Additional Microsoft Resources
IsMatch, Match, and MatchAll functions in Power Apps – Click here
More Regular Expressions for Canvas apps – Click here
Conclusion
Well, this is the end of this post. Using the above process or trick, you can set custom validation and restrict a user to enter the correct data.
Thank you so much for reading.
Well, That’s the end of this post. Let me know if you have any queries or suggestions in the comment below or reach out to me at 📧 dipak@powersolution.dev. I’ll see you next time.