Form error validation
Forms are a vital part of any application. Validating the information submitted through a form is crucial in order to correctly capture the submitted information.
Form field validation can help prevent users from submitting incorrect information in a form, or remind them to fill in a required field. The key to error validation is providing enough context for the user that they don't have a chance to make an error. This is especially important for users with disabilities.
Among other things, Pega's guidance on error validation covers:
- Setting up your form
- Client-side validation
- Server-side validation
Setting up your form
To help simplify the user experience, keep the following suggestions in mind when setting up your form:
- Provide sufficient instructions for the user at the top of the form. This will provide some context to the user for the information they must enter.
- If there are conditional fields on the form, let your users know so that they can anticipate the changes.
- Ensure that any fields displayed as conditional fields become visible after the field that triggers them. This allows screen reader users to be aware of the changes.
- When you set a field as 'required' it is marked with a visible asterisk. Ensure that you include a note at top of your form that explains that purpose of the asterisk. For example,"Fields marked with an asterisk* are required." This ensures that the user understands which fields are required to complete the form.
- Ensure that you write proper labeling and helper text. The more descriptive, the better, to help users understand what is needed and avoid errors in completing the form. Review the Pega Academy topic on Building accessible forms for further guidance on proper labeling and helper text.
- Always provide users with the power to address their errors. This can be through validation or navigation (the ability to go back through a screen flow or from a review screen).
Proper instructions and labeling should help mitigate most issues for users filling out a form, however if there still remains confusion then error validation can catch any potential mistakes and direct the user to fix their entries.
Pega applications can use two methods of form field error validation: client-side validation, and server-side validation.
Client-side validation
When a user enters data into a form in their web browser, the browser checks whether the data is in the correct format and within the constraints set by the application. Validation in a web browser is client-side validation
Out of the box, Pega Platform™ provides for client-side validation, which returns immediate inline feedback as the user moves through a form. For example, as they move from one field to another, if they miss or skip a required field or complete a field incorrectly, they will be immediately notified of the error. This information is displayed visibly as well as provided to assistive technology, so that a screen reader user can also quickly identify the error.
The following figure shows an example of an inline validation error:
The error messaging can also be announced to a screen reader on focus, along with the field name.
Note: In Pega Platform version 8.8 UI Kit and Theme Cosmos, authors have the option to add the field name to the error validation message text. Although this can provide more context for screen reader users, some people believe that this information could be redundant to the user. Therefore, the option to turn this on and off can be configured at the application level. See Adding field names to error messages on the Pega Documentation site for instructions on how to toggle this option.
Server-side validation
When you enter and submit data in a form, the web server checks to see that the data is in the correct format and within the constraints set by the application. Validation done on the server is server-side validation.
Server-side validation can be used to display custom error messages when an error is triggered. The purpose of the error messages is to notify the user that an entry is invalid, and to tell them how to fix it.
The following figure shows a validation error triggered by an improper value entered by the user:
When creating custom error messaging, keep the following recommendations in mind:
- Error messaging should be concise and contextual
- Form-level error messaging should list the items that need addressing and what is wrong
- Control-level errors should be clear and tell the user what they need to do
- Control-level error messaging should be set via Property
- Set the message from within the validation rule
- Do not use technical explanations, generic messages, or wordy and complex explanations
- Avoid using pop-up or modal dialog boxes
- Field-level validation should define the format as well as the value. If a user enters a value in a date field, and your error message only states that the field needs a value, this information is pointless. Instead, the user needs to be told, for example, that the format is incorrect
For more information on client-side and server-side validation, review Troubleshooting client-side and server-side validation issues in the Pega Support Center.
Check your knowledge with the following interaction:
Tip: For screen reader users, use the TAB key to access the knowledge check, navigate options with arrow keys and hit Enter to choose desired option.
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?