diff options
Diffstat (limited to '')
-rw-r--r-- | site/content/docs/5.3/forms/validation.md (renamed from site/content/docs/5.2/forms/validation.md) | 32 |
1 files changed, 23 insertions, 9 deletions
diff --git a/site/content/docs/5.2/forms/validation.md b/site/content/docs/5.3/forms/validation.md index d6d6266..c66bbaf 100644 --- a/site/content/docs/5.2/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -5,7 +5,7 @@ description: Provide valuable, actionable feedback to your users with HTML5 form group: forms toc: true extra_js: - - src: "/docs/5.2/assets/js/validate-forms.js" + - src: "/docs/5.3/assets/js/validate-forms.js" async: true --- @@ -19,7 +19,7 @@ Here's how form validation works with Bootstrap: - HTML form validation is applied via CSS's two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements. - Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted). -- To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the `.was-validated` class from the `<form>` again after submission. +- To reset the appearance of the form (for instance, in the case of dynamic form submissions using Ajax), remove the `.was-validated` class from the `<form>` again after submission. - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server-side validation](#server-side). They do not require a `.was-validated` parent class. - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the [constraint validation API](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. @@ -127,7 +127,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t <label for="validationDefaultUsername" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text" id="inputGroupPrepend2">@</span> - <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> + <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> </div> </div> <div class="col-md-6"> @@ -159,7 +159,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t </form> {{< /example >}} -## Server side +## Server-side 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`. Note that `.invalid-feedback` is also supported with these classes. @@ -349,19 +349,33 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas </form> {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.3.0" >}} + +As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}} + +These variables are also color mode adaptive, meaning they change color while in dark mode. + +### Sass variables + {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} -### Mixins +{{< scss-docs name="form-validation-colors" file="scss/_variables.scss" >}} + +{{< scss-docs name="form-validation-colors-dark" file="scss/_variables-dark.scss" >}} + +### Sass mixins -Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. +Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles. {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} -### Map +### Sass maps This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. @@ -369,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. -### Loop +### Sass loops Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. |