From a1f6370c61ed6bc2943587d3d3af079dcc6ced8f Mon Sep 17 00:00:00 2001 From: ysds Date: Tue, 17 Mar 2020 22:42:29 +0900 Subject: [PATCH 1/5] Drop feedback message by sibling selector --- scss/mixins/_forms.scss | 10 ---- site/content/docs/5.0/forms/validation.md | 57 ++----------------- .../docs/5.0/assets/js/validate-forms.js | 9 +-- 3 files changed, 9 insertions(+), 67 deletions(-) diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 99ca559846aa..533840fc76b3 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -15,8 +15,6 @@ @mixin form-validation-state($state, $color, $icon) { .#{$state}-feedback { - display: none; - width: 100%; margin-top: $form-feedback-margin-top; @include font-size($form-feedback-font-size); font-style: $form-feedback-font-style; @@ -27,7 +25,6 @@ position: absolute; top: 100%; z-index: 5; - display: none; max-width: 100%; // Contain to parent when possible padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; @@ -38,13 +35,6 @@ @include border-radius($form-feedback-tooltip-border-radius); } - @include form-validation-state-selector($state) { - ~ .#{$state}-feedback, - ~ .#{$state}-tooltip { - display: block; - } - } - .form-control { @include form-validation-state-selector($state) { border-color: $color; diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md index d70507037bc1..0c963a67482e 100644 --- a/site/content/docs/5.0/forms/validation.md +++ b/site/content/docs/5.0/forms/validation.md @@ -28,44 +28,32 @@ Here's how form validation works with Bootstrap: With that in mind, consider the following demos for our custom form validation styles, optional server-side classes, and browser defaults. -## Custom styles +## Form validation styles -For custom Bootstrap form validation messages, you'll need to add the `novalidate` boolean attribute to your `
`. 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 `:invalid` and `:valid` styles applied to your form controls. +Our form validation styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. -Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for ` -
- Looks good! -
-
- Looks good! -
@ -
- Please choose a username. -
-
- Please provide a valid city. -
@@ -73,16 +61,10 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun -
- Please select a valid state. -
-
- Please provide a valid zip. -
@@ -90,9 +72,6 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun -
- You must agree before submitting. -
@@ -161,40 +140,28 @@ While these feedback styles cannot be styled with CSS, you can still customize t ## 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. +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`. {{< example >}}
-
- Looks good! -
-
- Looks good! -
@ -
- Please choose a username. -
-
- Please provide a valid city. -
@@ -202,16 +169,10 @@ We recommend using client-side validation, but in case you require server-side v -
- Please select a valid state. -
-
- Please provide a valid zip. -
@@ -219,9 +180,6 @@ We recommend using client-side validation, but in case you require server-side v -
- You must agree before submitting. -
@@ -244,15 +202,11 @@ Validation styles are available for the following form controls and components:
-
- Please enter a message in the textarea. -
-
Example invalid feedback text
@@ -262,7 +216,6 @@ Validation styles are available for the following form controls and components:
-
More example invalid feedback text
@@ -272,7 +225,6 @@ Validation styles are available for the following form controls and components: -
Example invalid select feedback
@@ -281,7 +233,6 @@ Validation styles are available for the following form controls and components: Choose file... Browse -
Example invalid form file feedback
diff --git a/site/static/docs/5.0/assets/js/validate-forms.js b/site/static/docs/5.0/assets/js/validate-forms.js index f8fd583de4b1..11e00c8e8b64 100644 --- a/site/static/docs/5.0/assets/js/validate-forms.js +++ b/site/static/docs/5.0/assets/js/validate-forms.js @@ -10,11 +10,12 @@ .forEach(function (form) { form.addEventListener('submit', function (event) { if (!form.checkValidity()) { - event.preventDefault() - event.stopPropagation() + event.preventDefault(); + event.stopPropagation(); + form.reportValidity(); } - form.classList.add('was-validated') + form.classList.add('was-validated'); }, false) }) -})() +})() \ No newline at end of file From 99775f998bb423c5638e3de90593b325e999b4da Mon Sep 17 00:00:00 2001 From: ysds Date: Tue, 17 Mar 2020 23:40:09 +0900 Subject: [PATCH 2/5] Rewrite supported, feedback message and tooltip docs --- site/content/docs/5.0/forms/validation.md | 213 ++++++++++++++++------ 1 file changed, 157 insertions(+), 56 deletions(-) diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md index 0c963a67482e..57a78638080b 100644 --- a/site/content/docs/5.0/forms/validation.md +++ b/site/content/docs/5.0/forms/validation.md @@ -193,51 +193,129 @@ We recommend using client-side validation, but in case you require server-side v Validation styles are available for the following form controls and components: - ``s and ` + + + + +
+
+ @ +
+
+ +
- - + +
- - + +
- - + + +
+ +
+ + +
+ +{{< /example >}} + +## Feedback messages + +You can insert custom feedback messages with the `.valid-feedback` or `.invalid-feedback` that replaces the browser’s default feedback messages. + +{{< example >}} +
+
+ +
+ Example valid feedback text +
- +
+ Example valid feedback text +
+
+ +
+
+
+ @ +
+ +
+
+ Example invalid feedback text +
+
+ +
+ +
+ Example invalid feedback text +
+
+ +
+
+ + +
+
+ Example invalid feedback text +
-
- -