From 3ea39841c8049525e31e9f4d6300f0c60cdb42de Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Tue, 24 Jan 2023 13:33:51 +0100 Subject: Adding upstream version 5.2.3+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.2/forms/validation.md | 380 ++++++++++++++++++++++++++++++ 1 file changed, 380 insertions(+) create mode 100644 site/content/docs/5.2/forms/validation.md (limited to 'site/content/docs/5.2/forms/validation.md') diff --git a/site/content/docs/5.2/forms/validation.md b/site/content/docs/5.2/forms/validation.md new file mode 100644 index 0000000..d6d6266 --- /dev/null +++ b/site/content/docs/5.2/forms/validation.md @@ -0,0 +1,380 @@ +--- +layout: docs +title: Validation +description: Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript. +group: forms +toc: true +extra_js: + - src: "/docs/5.2/assets/js/validate-forms.js" + async: true +--- + +{{< callout warning >}} +We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we'd recommend either using the server-side option or the default browser validation method. +{{< /callout >}} + +## How it works + +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 ``, ` +
+ Please enter a message in the textarea. +
+ + +
+ + +
Example invalid feedback text
+
+ +
+ + +
+
+ + +
More example invalid feedback text
+
+ +
+ +
Example invalid select feedback
+
+ +
+ +
Example invalid form file feedback
+
+ +
+ +
+ +{{< /example >}} + +## Tooltips + +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. + +{{< example >}} +
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+ @ + +
+ Please choose a unique and valid username. +
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please select a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+ +
+
+{{< /example >}} + +## Sass + +### Variables + +{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} + +### Mixins + +Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. + +{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} + +### Map + +This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. + +{{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}} + +Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. + +### Loop + +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. + +{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}} + +### Customizing + +Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback. -- cgit v1.2.3