Input Validation Field and Form Level

See the example below for field level and form level validation.

Field and Form Input Validation key points

The validation is implemented using custom coded validation and messaging.

Field Level

This example demonstrates field level and form level input validation

Input validation id performed on keypress for fields that accept keyborad input
Restrict user input to alpha characters only or numeric characters only
If an invalid character is entered, the user is prompted with red text on the right side of the input
Ensure error message is read aloud by screen readers by using role="alert", aria-atomic="true" aria-live="assertive"

Form Level

Validate all required fields have valid values
Near the top of the form, prompt the user if fields are missing
Ensure error messages are read aloud by screen readers by using role="alert", aria-atomic="true" aria-live="assertive"

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.

Input Validation: Field Level and Form Level

Client Information

Gender Identity: Male Female

Race: American Indian or Alaska Native
Asian

Clinician National Identifier:

This demonstrates the field level validation for character-only input text fields.

Primary Diagnosis: (textbox char only)

Primary Diagnosis: (datalist)

Date of Birth:

Username and Password

Username:

Username and Password

Username:

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.

Field Level Validation - on Keypress

The input fields on this form require restrictions on what type of characters can be accepted. If an invalid character is entered, the character should be rejected, and an error message indicating why the character is invalid will display to the right of the input.

Custom Coded Data Validation Messages

Input validation messages can be presented to the user in a variety of methods. In the above example, we will present the user with text messages at the top of the edit form. The validation is performed on submit and checks for required fields that are left blank. The text of the message will be custom tailored and will not rely on the default or framework based messaging. Invalid messages are displayed for all required fields that are left blank.

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

if (InputContentPrimary is null || InputContentPrimary.Length == 0 || InputContentPrimary.Trim().Length == 0 ) = true, then it's invalid.

Native browser HTML validation is used for some attributes such as maxlength and in some cases required is used.

Data Input Validation Helpful Links

Click to explore some helpful links that were used in coding the data input validation on this page.

Data Input Validation Behavioral Characteristics

Click to see information on the behaviors and characteristics of the data input validation on this page.

Data Input Validation Coding and Logic

Click to examine the coding and logic details that were used for data input validation on this page.