Input Validation Using Modals

Input Validation Using Modals Key Points

• The validation is implemented using custom coded validation and modals deliver valid/invalid messages.
• Invalid input data modals are only displayed and announced after selecting Submit.
• Invalid data input messages are displayed in the body text of the modal.
• Invalid data input messages contain the first invalid or required field that is blank.

Please feel free to interact with this data entry form and experiment with its functionality. You may use mouse only, keyboard, or a combination of both. No changes will be saved, but the functionality mimics a real database interaction. Scroll down to see more information about the coding techniques used, behavioral characteristics, and helpful code snippets.

Problem: Data input validation messages are often not coded properly for assistive technology users.

Solution: Proper coding of the input validation and messaging can result in an usable and accessible experience for all.

Input Data Validation Using Modals

Input validation messages can be presented to the user in a variety of methods. In this example, when the user has entered data and selected Submit, they system will display a modal informing them of a successful save or invalid data input. The text of the message informs the user of the invalid field and how to fix it.

Data input validation is performed by custom coded validation routines written in C#. For example:

• if (objAddress.FirstName == null || objAddress.FirstName.Trim().Length == 0) = true, then it's invalid.