Input validation of form control


Demo

- Demo page

Examples

``HTML






aria-errormessage="validation-input"
title="Only alphanumeric characters can be used."
/>

Radio 1
Radio 2

Select 1
Select 2

aria-errormessage="validation-textarea">

`

HTML Attributes

aria-errormessage [required]

ID of the element that displays the validation message. See WAI-ARIA 1.2 for details.

title [optional]

Message displayed when the value does not match the pattern attribute value. HTML spec says, When an input element has a pattern attribute specified, authors should include a title attribute to give a description of the pattern.

Invalid style example

`css
:where(input, select, textarea):user-invalid,
[role='radiogroup']:has(input[type='radio']:user-invalid) {
/ any styles /
}
`

or

`css
:where(input, [role='radiogroup'], select, textarea)[aria-invalid='true'] {
/ any styles /
}
``