From 76f1a799ea993680a96462064d01ceb623a93a8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Dec 2017 13:02:14 -0800 Subject: [PATCH 1/4] Add additional form validation examples Fixes #24811. This adds .valid-feedback to our custom styles and server side examples; previously we ommitted this to suggest you don't always need valid feedback. In addition, this adds examples of the .{valid|invalid}-tooltip classes with a new subsection in the Validation docs. --- docs/4.0/components/forms.md | 96 ++++++++++++++++++++++++++++++++---- 1 file changed, 86 insertions(+), 10 deletions(-) diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index e5a568b67b05..58f005d398b7 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -724,15 +724,21 @@ For custom Bootstrap form validation messages, you'll need to add the `novalidat When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls. {% example html %} -
+
+
+ Looks good! +
+
+ Looks good! +
@@ -777,16 +783,19 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; - window.addEventListener('load', function() { - var form = document.getElementById('needs-validation'); - form.addEventListener('submit', function(event) { - if (form.checkValidity() === false) { - event.preventDefault(); - event.stopPropagation(); - } - form.classList.add('was-validated'); - }, false); + // Fetch all the forms we want to apply custom Bootstrap validation styles to + var forms = document.getElementsByClassName('needs-validation'); + // Loop over them and prevent submission + var validation = Array.prototype.filter.call(forms, function(form) { + form.addEventListener('submit', function(event) { + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + } + form.classList.add('was-validated'); + }, false); + }); }, false); })(); @@ -847,10 +856,16 @@ We recommend using client side validation, but in case you require server side,
+
+ Looks good! +
+
+ Looks good! +
@@ -933,6 +948,67 @@ Our example forms show native textual ``s above, but form validation styl {% endexample %} +### 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. While + +{% example html %} +
+
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+
+ @ +
+ +
+ Please choose a unique and valid username. +
+
+
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please provide a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+ +
+{% endexample %} + ## Custom forms For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control. From 958c1cc75401756f31963167b765d5a1c343192b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Dec 2017 13:03:05 -0800 Subject: [PATCH 2/4] Update validation tooltip styles to remove fixed width; instead should retain itself to the parent element --- scss/mixins/_forms.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index d25df182dfa2..627e0dc82c28 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -27,7 +27,6 @@ @mixin form-validation-state($state, $color) { - .#{$state}-feedback { display: none; width: 100%; @@ -41,7 +40,7 @@ top: 100%; z-index: 5; display: none; - width: 250px; + max-width: 100%; // Contain to parent when possible padding: .5rem; margin-top: .1rem; font-size: .875rem; From febc6a63c1238c6d7acab3adbdee59ef8528f66d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Dec 2017 13:37:28 -0800 Subject: [PATCH 3/4] update ids --- docs/4.0/components/forms.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 58f005d398b7..1253c7de434d 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -956,26 +956,26 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
- - + +
Looks good!
- - + +
Looks good!
- +
- @ + @
- +
Please choose a unique and valid username.
@@ -984,22 +984,22 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
- - + +
Please provide a valid city.
- - + +
Please provide a valid state.
- - + +
Please provide a valid zip.
From 0b47688d908b111da05616a07536fa53428f8ccb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Dec 2017 21:06:55 -0800 Subject: [PATCH 4/4] finish docs paragraph, mention position: relative --- docs/4.0/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 1253c7de434d..84a765cdd4a2 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -950,7 +950,7 @@ Our example forms show native textual ``s above, but form validation styl ### 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. While +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 html %}