required

Overview

The required attribute prevents form submission when a field is empty. The browser checks the constraint on submit and shows a native error message if the field has no value.

This is the foundation of client-side form validation. It works without JavaScript, integrates with CSS pseudo-classes for styling, and is announced by screen readers.

Applies to: <input>, <select>, <textarea>

Values

Select Elements

For <select required>, the first option must have an empty value attribute. This serves as the placeholder. The browser considers the field invalid as long as the empty-value option is selected.

Radio Groups

Adding required to any radio button in a group makes the entire group required — at least one radio must be selected. You only need required on one radio, but adding it to the first one is a common convention for readability.

Checkboxes

A required checkbox must be checked for the form to submit. This is the standard pattern for "I agree to the terms" checkboxes.

CSS Pseudo-Classes

The required attribute activates several CSS pseudo-classes for validation styling.

Prefer :user-invalid over :invalid. The :invalid pseudo-class applies immediately on page load, which means empty required fields show error styles before the user has done anything. The :user-invalid pseudo-class waits until the user has interacted with the field.

Custom Validation Messages

Native validation messages are functional but generic. Use setCustomValidity() to provide context-specific messages.

Call setCustomValidity('') (empty string) to mark the field as valid. Forgetting this step is a common bug — the field stays invalid even after the user corrects the value.

Bypassing Validation

Use formnovalidate on a submit button to bypass all constraint validation for that specific submission. This is ideal for "Save Draft" buttons where incomplete data is acceptable.

See novalidate for more on validation bypass patterns.

Accessibility

• Screen readers announce required fields as "required". You do not need aria-required="true" when the native required attribute is present — it is redundant.
• Always pair the required attribute with a visible indicator (like an asterisk *) so sighted users can identify required fields without submitting first.
• Use aria-hidden="true" on decorative asterisks so screen readers do not announce "star" alongside "required".
• Native validation messages are automatically announced by screen readers when the form is submitted with invalid fields.

Limitations

• required is a boolean attribute. required="false" still makes the field required. Remove the attribute entirely to make it optional.
• Constraint validation does not run on disabled or readonly fields, even if they have the required attribute.
• Validation only runs on form submit (or when you call checkValidity() / reportValidity() in JavaScript). Typing in a field does not trigger it.
• The novalidate attribute on the form or formnovalidate on a button bypasses all constraint validation, including required.
• Native validation tooltips cannot be styled with CSS. If you need custom styling, use novalidate on the form and build your own validation UI.