Input Validation on Modal Edit Forms

Modal Edit Form Input Validation Key Points

• The validation is implemented using custom coded validation and messaging presented inside the edit modal.
• Invalid input data messages are only displayed and announced after selecting Submit.
• Invalid data input messages are displayed at the top of the modal edit form.
• Invalid data input messages contain the first invalid or required field that is blank.

Please click the Add Address button below and 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.

Data Input Validation Inside a Modal Edit Form

Input validation messages can be presented to the user in a variety of methods. In this example, we will present the user with a text message at the top of the modal edit form. The text of the message will be custom tailored and will not rely on the default or framework based messaging.

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.