Form Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Browser Default Validation

HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid.

First name

Last name

Password Minimum 8 characters

Agree to terms and conditions

Custom Bootstrap Validation

For custom Bootstrap form validation messages, you'll need to add the novalidate boolean attribute to your form.

First name

Looks good!

Please provide a valid first name.

Last name

Looks good!

Please provide a valid last name.

Valid email address!

Please provide a valid email address.

Password

Strong password!

Password must be at least 8 characters long.

Agree to terms and conditions

You must agree before submitting.

Server Side Validation Example

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid.

First name

Looks good!

Last name

Looks good!

Username

Username is already taken.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Supported Elements

Validation styles are available for the following form controls and components:

Input Fields

Textarea

Please enter a message in the textarea.

Select

Please select a valid option.

File input

Please select a file.

Checkboxes and Radios

Check this checkbox

You must check this box.

First radio

Second radio

Please select a radio button.

Toggle this switch

You must toggle this switch.

Real-time Validation Example

This form demonstrates real-time validation with custom rules as you type.

Username

Must be 4-20 characters, alphanumeric only

Password

Password strength: None

Confirm Password

Phone Number

Credit Card

Advanced Registration Form

Personal Information

Full Name

Please enter a valid name (letters only).

Date of Birth

You must be at least 18 years old.

Gender

Male

Female

Other

Please select your gender.

Contact Information

Email Address

Please provide a valid email address.

Phone Number

Please provide a valid phone number (123-456-7890).

Website (Optional)

Please provide a valid URL.

Address Information

Street Address

Please provide your address.

City

Please provide a valid city.

State

Please select a state.

Zip Code

Please provide a valid 5-digit zip code.

Subscribe to newsletter

I agree to the terms and conditions

You must agree to the terms and conditions.