{{> layouts/head pageTitle="Form Validation" }}
{{> layouts/header }} {{> layouts/sidebar activeMenu="forms" activePage="form-validation" }}

## 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
Email
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.
Email
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
Email
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.
{{> layouts/footer }}
{{> layouts/scripts }}