Theta - Form Validations

Form Validations

Form Validation

For custom Bootstrap form validation messages, you’ll need to add the `novalidate` boolean attribute to your `<form>`.

First name

Looks good!

Last name

Looks good!

Username

Please choose a username.

City

Please provide a valid city.

State

Please provide a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Tooltips Validations

If your form layout allows it, you can swap the `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.

First name

Last name

Username

City

State

Zip

Browser defaults

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults.

First name

Last name

Username

City

State

Zip

Agree to terms and conditions

Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.

First name

Looks good!

Last name

Looks good!

Username

Please choose a username.

City

Please provide a valid city.

State

Please provide a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Supported elements

Our example forms show native textual `<input>`s above, but form validation styles are available for our custom form controls, too.

Check this custom checkbox

Example invalid feedback text

Toggle this custom radio

Or toggle this other custom radio

More example invalid feedback text

Example invalid custom select feedback

Choose file...

Example invalid custom file feedback

Form Validation

Basic form validation.

User ID *

Email *

Password *

Re-Type Password *

Description *

Skill *

Currency *

Website *

Phone *

Digits *

Number *

Range [1, 5] *

Terms & Conditions *

I agree to the terms & conditions of Theta

Notifications

Amy Adams1Jan 22

James Simpsons2Feb 15

Mark Witherspoon3Mar 03

Jenniffer Wills4Apr 05

Nelson SmithJan 22

Courtney CoxFeb 15

Rachel WhiteMar 03

FreepikMar 03

Payment Success !!!

Nobita Applied for Leave.

Alert

Congratulations !!!

Settings

Select Color

Night Mode

Navigation Sidebar

Select Account

Shourya

Amy

John

Add

Shourya Kumar

Form Validations

Form Validation

For custom Bootstrap form validation messages, you’ll need to add the `novalidate` boolean attribute to your `<form>`.

Tooltips Validations

Browser defaults

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults.

Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.

Supported elements

Our example forms show native textual `<input>`s above, but form validation styles are available for our custom form controls, too.

Form Validation

Basic form validation.

Notifications

Amy Adams1Jan 22

James Simpsons2Feb 15

Mark Witherspoon3Mar 03

Jenniffer Wills4Apr 05

Nelson SmithJan 22

Courtney CoxFeb 15

Rachel WhiteMar 03

FreepikMar 03

Payment Success !!!

Nobita Applied for Leave.

Alert

Congratulations !!!

Settings

Select Color

Night Mode

Navigation Sidebar

Select Account

Shourya

Amy

John

Add

Shourya Kumar

Form Validations

Form Validation

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

Tooltips Validations

Browser defaults

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults.

Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

Supported elements

Our example forms show native textual <input>s above, but form validation styles are available for our custom form controls, too.

Form Validation

Basic form validation.

For custom Bootstrap form validation messages, you’ll need to add the `novalidate` boolean attribute to your `<form>`.

We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.

Our example forms show native textual `<input>`s above, but form validation styles are available for our custom form controls, too.