Simple test page for required, invalid, error alert. This is meant to be a simple demonstration of different types of error display. There is no claim of good coding style or design!

Favorite number field is validated for integer value when press enter or tab key. Whe press the tab key and the field is in error, an error alert is displayed and focus is returned to the input field. If tab is pressed again, focus moves to the next field even if an error exists and the error alert remains visible.

Enter your favorite number Error: Entry must be an integer value!

The least favorite number field is validated for integer intput on the blur event. If the field is in error the error alert is displayed and focus is returned to the field. The user can not keyboard out of the field until the error is fixed.

Enter your least favorite number Error: Entry must be an integer value!

Age field is marked as required via ARIA required=true and is validated for existence of entry and that the entry is an integer value when the Check Age button is clicked. When an error is found, the appropriate error message is displayed (either required or invalid entry) and focus is returned to the field. The age field is marked with a * to indicate that it is required so I didn't have to put the actual text of required in the label and have it spoken twice by screen readers that support required=true role.

Enter your age*: Error: Age must be completed! Error: Entry must be an integer value!

Check Age