extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/docs/forms/validation/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Forms'},
{ label: 'Validation'}
]
)
block js
| // Example starter JavaScript for disabling form submissions if there are invalid fields
| (function () {
| 'use strict'
| // Fetch all the forms we want to apply custom Bootstrap validation styles to
| var forms = document.querySelectorAll('.needs-validation')
| // Loop over them and prevent submission
| Array.prototype.slice.call(forms).forEach(function (form) {
| form.addEventListener('submit', function (event) {
| if (!form.checkValidity()) {
| event.preventDefault()
| event.stopPropagation()
| }
| form.classList.add('was-validated')
| }, false)
| })
| })()
block view
+docs-components('https://coreui.io/docs/forms/validation/')
.row
.col-12
.card.mb-4
.card-header
strong Form validation
span.small.ms-1 Custom styles
.card-body
p.text-body-secondary.small
| For custom CoreUI for Bootstrap form validation messages, you’ll need to add the
code novalidate
| boolean attribute to your
code
= '<form>'
| . This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the
code :invalid
| and
code :valid
| styles applied to your form controls.
p.text-body-secondary.small
| Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for
code
= '<select>'
| s are only available with
code .form-select
| , and not
code .form-control
| .
+example('https://coreui.io/docs/forms/validation/#custom-styles')
form.row.g-3.needs-validation(novalidate)
.col-md-4
label.form-label(for='validationCustom01') First name
input.form-control#validationCustom01(type='text' value='Mark' required)
.valid-feedback.
Looks good!
.col-md-4
label.form-label(for='validationCustom02') Last name
input.form-control#validationCustom02(type='text' value='Otto' required)
.valid-feedback.
Looks good!
.col-md-4
label.form-label(for='validationCustomUsername') Username
.input-group.has-validation
span.input-group-text#inputGroupPrepend @
input.form-control#validationCustomUsername(type='text' aria-describedby='inputGroupPrepend' required)
.invalid-feedback.
Please choose a username.
.col-md-6
label.form-label(for='validationCustom03') City
input.form-control#validationCustom03(type='text' required)
.invalid-feedback.
Please provide a valid city.
.col-md-3
label.form-label(for='validationCustom04') State
select.form-select#validationCustom04(required)
option(selected disabled value) Choose...
option ...
.invalid-feedback.
Please select a valid state.
.col-md-3
label.form-label(for='validationCustom05') Zip
input.form-control#validationCustom05(type='text' required)
.invalid-feedback.
Please provide a valid zip.
.col-12
.form-check
input.form-check-input#invalidCheck(type='checkbox' required)
label.form-check-label(for='invalidCheck').
Agree to terms and conditions
.invalid-feedback.
You must agree before submitting.
.col-12
button.btn.btn-primary(type='submit') Submit form
.col-12
.card.mb-4
.card-header
strong Form validation
span.small.ms-1 Browser defaults
.card-body
p.text-body-secondary.small Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.
p.text-body-secondary.small While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
+example('https://coreui.io/docs/forms/validation/#browser-defaults')
form.row.g-3
.col-md-4
label.form-label(for='validationDefault01') First name
input.form-control#validationDefault01(type='text' value='Mark' required)
.col-md-4
label.form-label(for='validationDefault02') Last name
input.form-control#validationDefault02(type='text' value='Otto' required)
.col-md-4
label.form-label(for='validationDefaultUsername') Username
.input-group
span.input-group-text#inputGroupPrepend2 @
input.form-control#validationDefaultUsername(type='text' aria-describedby='inputGroupPrepend2' required)
.col-md-6
label.form-label(for='validationDefault03') City
input.form-control#validationDefault03(type='text' required)
.col-md-3
label.form-label(for='validationDefault04') State
select.form-select#validationDefault04(required)
option(selected disabled value) Choose...
option ...
.col-md-3
label.form-label(for='validationDefault05') Zip
input.form-control#validationDefault05(type='text' required)
.col-12
.form-check
input.form-check-input#invalidCheck2(type='checkbox' required)
label.form-check-label(for='invalidCheck2').
Agree to terms and conditions
.col-12
button.btn.btn-primary(type='submit') Submit form
.col-12
.card.mb-4
.card-header
strong Form validation
span.small.ms-1 Server side
.card-body
p.text-body-secondary.small
| We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with
code .is-invalid
| and
code .is-valid
| . Note that
code .invalid-feedback
| is also supported with these classes.
p.text-body-secondary.small
| For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using
code aria-describedby
| (noting that this attribute allows more than one
code id
| to be referenced, in case the field already points to additional form text).
p.text-body-secondary.small
| To fix
a(href='https://github.com/twbs/bootstrap/issues/25110') issues with border radii
| , input groups require an additional
code .has-validation
| class.
+example('https://coreui.io/docs/forms/validation/#server-side')
form.row.g-3
.col-md-4
label.form-label(for='validationServer01') First name
input.form-control.is-valid#validationServer01(type='text' value='Mark' required)
.valid-feedback.
Looks good!
.col-md-4
label.form-label(for='validationServer02') Last name
input.form-control.is-valid#validationServer02(type='text' value='Otto' required)
.valid-feedback.
Looks good!
.col-md-4
label.form-label(for='validationServerUsername') Username
.input-group.has-validation
span.input-group-text#inputGroupPrepend3 @
input.form-control.is-invalid#validationServerUsername(type='text' aria-describedby='inputGroupPrepend3 validationServerUsernameFeedback' required)
#validationServerUsernameFeedback.invalid-feedback.
Please choose a username.
.col-md-6
label.form-label(for='validationServer03') City
input.form-control.is-invalid#validationServer03(type='text' aria-describedby='validationServer03Feedback' required)
#validationServer03Feedback.invalid-feedback.
Please provide a valid city.
.col-md-3
label.form-label(for='validationServer04') State
select.form-select.is-invalid#validationServer04(aria-describedby='validationServer04Feedback' required)
option(selected disabled value) Choose...
option ...
#validationServer04Feedback.invalid-feedback.
Please select a valid state.
.col-md-3
label.form-label(for='validationServer05') Zip
input.form-control.is-invalid#validationServer05(type='text' aria-describedby='validationServer05Feedback' required)
#validationServer05Feedback.invalid-feedback.
Please provide a valid zip.
.col-12
.form-check
input.form-check-input.is-invalid#invalidCheck3(type='checkbox' aria-describedby='invalidCheck3Feedback' required)
label.form-check-label(for='invalidCheck3').
Agree to terms and conditions
#invalidCheck3Feedback.invalid-feedback.
You must agree before submitting.
.col-12
button.btn.btn-primary(type='submit') Submit form
.col-12
.card.mb-4
.card-header
strong Form validation
span.small.ms-1 Supported elements
.card-body
p.text-body-secondary.small Validation styles are available for the following form controls and components:
ul
li
|
code
= '<input>'
| s and
code
= '<textarea>'
| s with
code .form-control
| (including up to one
code .form-control
| in input groups)
li
|
code
= '<select>'
code .form-select
li
|
code .form-check
| s
+example('https://coreui.io/docs/forms/validation/#supported-elements')
form.was-validated
.mb-3
label.form-label(for='validationTextarea') Textarea
textarea.form-control.is-invalid#validationTextarea(placeholder='Required example textarea' required)
.invalid-feedback.
Please enter a message in the textarea.
.form-check.mb-3
input.form-check-input#validationFormCheck1(type='checkbox' required)
label.form-check-label(for='validationFormCheck1') Check this checkbox
.invalid-feedback Example invalid feedback text
.form-check
input.form-check-input#validationFormCheck2(type='radio' name='radio-stacked' required)
label.form-check-label(for='validationFormCheck2') Toggle this radio
.form-check.mb-3
input.form-check-input#validationFormCheck3(type='radio' name='radio-stacked' required)
label.form-check-label(for='validationFormCheck3') Or toggle this other radio
.invalid-feedback More example invalid feedback text
.mb-3
select.form-select(required aria-label='select example')
option(value) Open this select menu
option(value='1') One
option(value='2') Two
option(value='3') Three
.invalid-feedback Example invalid select feedback
.mb-3
input.form-control(type='file' aria-label='file example' required)
.invalid-feedback Example invalid form file feedback
.mb-3
button.btn.btn-primary(type='submit' disabled) Submit form
.col-12
.card.mb-4
.card-header
strong Form validation
span.small.ms-1 Tooltips
.card-body
p.text-body-secondary.small
| If your form layout allows it, you can swap the
code .{valid|invalid}-feedback
| classes for
code .{valid|invalid}-tooltip
| classes to display validation feedback in a styled tooltip. Be sure to have a parent with
code 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.
+example('https://coreui.io/docs/forms/validation/#tooltips')
form.row.g-3.needs-validation(novalidate)
.col-md-4.position-relative
label.form-label(for='validationTooltip01') First name
input.form-control#validationTooltip01(type='text' value='Mark' required)
.valid-tooltip.
Looks good!
.col-md-4.position-relative
label.form-label(for='validationTooltip02') Last name
input.form-control#validationTooltip02(type='text' value='Otto' required)
.valid-tooltip.
Looks good!
.col-md-4.position-relative
label.form-label(for='validationTooltipUsername') Username
.input-group.has-validation
span.input-group-text#validationTooltipUsernamePrepend @
input.form-control#validationTooltipUsername(type='text' aria-describedby='validationTooltipUsernamePrepend' required)
.invalid-tooltip.
Please choose a unique and valid username.
.col-md-6.position-relative
label.form-label(for='validationTooltip03') City
input.form-control#validationTooltip03(type='text' required)
.invalid-tooltip.
Please provide a valid city.
.col-md-3.position-relative
label.form-label(for='validationTooltip04') State
select.form-select#validationTooltip04(required)
option(selected disabled value) Choose...
option ...
.invalid-tooltip.
Please select a valid state.
.col-md-3.position-relative
label.form-label(for='validationTooltip05') Zip
input.form-control#validationTooltip05(type='text' required)
.invalid-tooltip.
Please provide a valid zip.
.col-12
button.btn.btn-primary(type='submit') Submit form
