Data Input Validation using Built In Framework Validation

Framework Based Validation key points

• Input validation is implemented using the Blazor framwork server side built in data validation.
• Invalid data input messages are only displayed and announced after selecting Submit.
• Invalid data input messages are displayed at the top of the edit form.
• Invalid data input messages contain all required fields that are invalid or 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.

Framework based Data Input Validation Overview

Data input validation can be performed in a variety of ways, the edit form above is an example of framework based data input validation. The validation is implemented using out of the box server side functionality provided by Microsoft's Blazor framework. In addition, some custom coding is used to achieve the desired behaviors required by assistive technology users.

Upon submitting entered data, the form presents users with validation message text that appears at the top of the form. No modals or popups are used in this example. The key to making this form usable and accessible is to code it properly to control what information is announced by screen readers.