For each of Frontly's blocks that can collect user inputs (Form block, Full Screen Form, User Input blocks), you have the ability to create input parameters that a user must follow before they're able to submit. This process is called validation, and some of the most basic forms of validation is determining if a form field input is optional or required prior to submission.
Submissions that don't meet the validation requirements of a field will prevent the action, and highlight the affected fields in red with the relevant text.
Besides determining whether a field in your form is required to be filled or not, here are some other reason why validation is crucial for an user input block.
1. Improves Data Quality and Accuracy
Reason: User validation helps ensure that the information submitted by users is accurate and complete. This reduces the risk of receiving incorrect, incomplete, or inconsistent data.
Example: Ensuring email addresses are correctly formatted prevents errors in communication and maintains a clean database.
2. Enhances User Experience
Reason: Real-time validation provides immediate feedback to users, helping them correct errors before submission. This makes the form-filling process smoother and less frustrating.
Example: Highlighting required fields and providing clear error messages helps users understand what needs to be fixed, leading to quicker and more successful form submissions.
Setup
For each field you wish to set up validation parameters for, locate the 'Edit Field Validation' setting.
Clicking this setting will open a list of options, some that are toggle-able and others with enterable values.
Overview of Field Validation Settings
Required: Makes it so the field must have a value prior to submission.
Is Email: Ensures the submitted value is formatted like an email.
Is Price: Ensures the submitted value contains a $ symbol.
Is Number: Ensures the submitted value is purely a number and has no letters or symbols.
Is True: If using a Checkbox or Switch field type, ensuring that the submitted value is 'True'.
Is Alphabetical: Ensures the submitted value has only letters and no numbers or symbols.
Min Chars/Value: Set a minimum number of characters or numbers for each response. Can be combined with any of the toggle-able settings above.
Max Chars/Value: Set a maximum number of characters or numbers for each response. Can be combined with any of the toggle-able settings above
Custom Regex and Custom Regex Error
For validation rules that are even more defined, you can use Custom Regex field to check if text follows specific rules.
In form filling, custom regex (or custom "regular expression") is a syntax that helps ensure that users' input match a specific pattern or format, like social security number, postal code, or credit card number.
By using the 'Custom Regex' field with the 'Custom Regex Error' one, you can alert users to errors in custom defined ways.
Important Note: Custom regex is a programming language and is not meant to be understood by a non-technical user. To pull the regex code that meets your use case, we recommend asking an AI model like ChatGPT that will have no issue generating your format in this syntax.
Example
To ensure that a user is submitting a Canadian postal code value in the format 'A1A 1A1', enter the into the custom regex field "^[A-Za-z]\d[A-Za-z] ?\d[A-Za-z]\d$".
For the 'Custom Regex Error' field, enter in plain language now what you will show your users in the error code in case they don't enter their field value the first time. An example of the setup and result is shown below.
