From a1f6370c61ed6bc2943587d3d3af079dcc6ced8f Mon Sep 17 00:00:00 2001
From: ysds <ysds.code@gmail.com>
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 99ca55984..533840fc7 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 d70507037..0c963a674 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 `<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 `: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 `<select>`s are only available with `.form-select`, and not `.form-control`.
+For form validation styles, you'll need to add the `novalidate` boolean attribute to your `<form>`. This disables the browser default form validatiom, but still provides access to the form validation APIs in JavaScript. Try to submit the form below, you'll see the `:invalid` and `:valid` styles applied to your form controls. Our JavaScript will intercept the submit button and call the `reportValidity()` method of the form validation API.
 
 {{< example >}}
 <form class="row g-3 needs-validation" novalidate>
   <div class="col-md-4">
     <label for="validationCustom01" class="form-label">First name</label>
     <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
-    <div class="valid-feedback">
-      Looks good!
-    </div>
   </div>
   <div class="col-md-4">
     <label for="validationCustom02" class="form-label">Last name</label>
     <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
-    <div class="valid-feedback">
-      Looks good!
-    </div>
   </div>
   <div class="col-md-4">
     <label for="validationCustomUsername" class="form-label">Username</label>
     <div class="input-group">
       <span class="input-group-text" id="inputGroupPrepend">@</span>
       <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
-      <div class="invalid-feedback">
-        Please choose a username.
-      </div>
     </div>
   </div>
   <div class="col-md-6">
     <label for="validationCustom03" class="form-label">City</label>
     <input type="text" class="form-control" id="validationCustom03" required>
-    <div class="invalid-feedback">
-      Please provide a valid city.
-    </div>
   </div>
   <div class="col-md-3">
     <label for="validationCustom04" class="form-label">State</label>
@@ -73,16 +61,10 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
       <option selected disabled value="">Choose...</option>
       <option>...</option>
     </select>
-    <div class="invalid-feedback">
-      Please select a valid state.
-    </div>
   </div>
   <div class="col-md-3">
     <label for="validationCustom05" class="form-label">Zip</label>
     <input type="text" class="form-control" id="validationCustom05" required>
-    <div class="invalid-feedback">
-      Please provide a valid zip.
-    </div>
   </div>
   <div class="col-12">
     <div class="form-check">
@@ -90,9 +72,6 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
       <label class="form-check-label" for="invalidCheck">
         Agree to terms and conditions
       </label>
-      <div class="invalid-feedback">
-        You must agree before submitting.
-      </div>
     </div>
   </div>
   <div class="col-12">
@@ -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 >}}
 <form class="row g-3">
   <div class="col-md-4">
     <label for="validationServer01" class="form-label">First name</label>
     <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
-    <div class="valid-feedback">
-      Looks good!
-    </div>
   </div>
   <div class="col-md-4">
     <label for="validationServer02" class="form-label">Last name</label>
     <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
-    <div class="valid-feedback">
-      Looks good!
-    </div>
   </div>
   <div class="col-md-4">
     <label for="validationServerUsername" class="form-label">Username</label>
     <div class="input-group">
       <span class="input-group-text" id="inputGroupPrepend3">@</span>
       <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
-      <div class="invalid-feedback">
-        Please choose a username.
-      </div>
     </div>
   </div>
   <div class="col-md-6">
     <label for="validationServer03" class="form-label">City</label>
     <input type="text" class="form-control is-invalid" id="validationServer03" required>
-    <div class="invalid-feedback">
-      Please provide a valid city.
-    </div>
   </div>
   <div class="col-md-3">
     <label for="validationServer04" class="form-label">State</label>
@@ -202,16 +169,10 @@ We recommend using client-side validation, but in case you require server-side v
       <option selected disabled value="">Choose...</option>
       <option>...</option>
     </select>
-    <div class="invalid-feedback">
-      Please select a valid state.
-    </div>
   </div>
   <div class="col-md-3">
     <label for="validationServer05" class="form-label">Zip</label>
     <input type="text" class="form-control is-invalid" id="validationServer05" required>
-    <div class="invalid-feedback">
-      Please provide a valid zip.
-    </div>
   </div>
   <div class="col-12">
     <div class="form-check">
@@ -219,9 +180,6 @@ We recommend using client-side validation, but in case you require server-side v
       <label class="form-check-label" for="invalidCheck3">
         Agree to terms and conditions
       </label>
-      <div class="invalid-feedback">
-        You must agree before submitting.
-      </div>
     </div>
   </div>
   <div class="col-12">
@@ -244,15 +202,11 @@ Validation styles are available for the following form controls and components:
   <div class="mb-3">
     <label for="validationTextarea" class="form-label">Textarea</label>
     <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
-    <div class="invalid-feedback">
-      Please enter a message in the textarea.
-    </div>
   </div>
 
   <div class="form-check mb-3">
     <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
     <label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
-    <div class="invalid-feedback">Example invalid feedback text</div>
   </div>
 
   <div class="form-check">
@@ -262,7 +216,6 @@ Validation styles are available for the following form controls and components:
   <div class="form-check mb-3">
     <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
     <label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
-    <div class="invalid-feedback">More example invalid feedback text</div>
   </div>
 
   <div class="mb-3">
@@ -272,7 +225,6 @@ Validation styles are available for the following form controls and components:
       <option value="2">Two</option>
       <option value="3">Three</option>
     </select>
-    <div class="invalid-feedback">Example invalid select feedback</div>
   </div>
 
   <div class="form-file mb-3">
@@ -281,7 +233,6 @@ Validation styles are available for the following form controls and components:
       <span class="form-file-text">Choose file...</span>
       <span class="form-file-button">Browse</span>
     </label>
-    <div class="invalid-feedback">Example invalid form file feedback</div>
   </div>
 
   <div class="mb-3">
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 f8fd583de..11e00c8e8 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 <ysds.code@gmail.com>
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 | 219 ++++++++++++++++------
 1 file changed, 160 insertions(+), 59 deletions(-)

diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 0c963a674..57a786380 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -193,50 +193,128 @@ 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:
 
 - `<input>`s and `<textarea>`s with `.form-control` (including up to one `.form-control` in input groups)
-- `<select>`s with `.form-select`
+- `.form-select`s
 - `.form-check`s
-- `.form-file`
+- `.form-file`s
 
 {{< example >}}
 <form class="was-validated">
-  <div class="mb-3">
-    <label for="validationTextarea" class="form-label">Textarea</label>
-    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
+  <input type="text" class="form-control mb-3" placeholder="Required form control" required>
+
+  <textarea class="form-control mb-3" placeholder="Required textarea" required></textarea>
+
+  <div class="input-group mb-3">
+    <div class="input-group-prepend">
+      <span class="input-group-text" id="supportedInputGroupPrepend">@</span>
+    </div>
+    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="supportedInputGroupPrepend" required>
   </div>
 
+  <select class="form-select mb-3" required>
+    <option value="">Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+
   <div class="form-check mb-3">
-    <input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
-    <label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
+    <input type="checkbox" class="form-check-input" id="supportedCheckbox" required>
+    <label class="form-check-label" for="supportedCheckbox">Check this checkbox</label>
   </div>
 
   <div class="form-check">
-    <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
-    <label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
+    <input type="radio" class="form-check-input" id="supportedRadio1" name="radio-supported" required>
+    <label class="form-check-label" for="supportedRadio1">Toggle this radio</label>
   </div>
   <div class="form-check mb-3">
-    <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
-    <label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
+    <input type="radio" class="form-check-input" id="supportedRadio2" name="radio-supported" required>
+    <label class="form-check-label" for="supportedRadio2">Or toggle this other radio</label>
+  </div>
+
+  <div class="form-file">
+    <input type="file" class="form-file-input" id="supportedFormFile" required>
+    <label class="form-file-label" for="supportedFormFile">
+      <span class="form-file-text">Choose file...</span>
+      <span class="form-file-button">Browse</span>
+    </label>
+  </div>
+</form>
+{{< /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 >}}
+<form>
+  <div class="mb-3">
+    <input type="text" class="form-control is-valid" value="Form control" aria-describedby="messageFeedbackFormControl" required>
+    <div class="valid-feedback" id="messageFeedbackFormControl">
+      Example valid feedback text
+    </div>
   </div>
 
   <div class="mb-3">
-    <select class="form-select" required aria-label="select example">
+    <textarea class="form-control is-valid" aria-describedby="messageFeedbackTextarea" required>Textarea</textarea>
+    <div class="valid-feedback" id="messageFeedbackTextarea">
+      Example valid feedback text
+    </div>
+  </div>
+
+  <div class="mb-3">
+    <div class="input-group">
+      <div class="input-group-prepend">
+        <span class="input-group-text" id="feedbackInputGroupPrepend">@</span>
+      </div>
+      <input type="text" class="form-control is-invalid" placeholder="Username" aria-label="Username" aria-describedby="feedbackInputGroupPrepend messageFeedbackInputGroup" required>
+    </div>
+    <div class="invalid-feedback" id="messageFeedbackInputGroup">
+      Example invalid feedback text
+    </div>
+  </div>
+
+  <div class="mb-3">
+    <select class="form-select is-invalid" aria-describedby="messageFeedbackSelect" required>
       <option value="">Open this select menu</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
     </select>
-  </div>
-
-  <div class="form-file mb-3">
-    <input type="file" class="form-file-input" id="validationFormFile" required>
-    <label class="form-file-label" for="validationFormFile">
-      <span class="form-file-text">Choose file...</span>
-      <span class="form-file-button">Browse</span>
-    </label>
+    <div class="invalid-feedback" id="messageFeedbackSelect">
+      Example invalid feedback text
+    </div>
   </div>
 
   <div class="mb-3">
-    <button class="btn btn-primary" type="submit" disabled>Submit form</button>
+    <div class="form-check">
+      <input type="checkbox" class="form-check-input is-invalid" id="feedbackCheckbox" required>
+      <label class="form-check-label" for="feedbackCheckbox">Check this checkbox</label>
+    </div>
+    <div class="invalid-feedback">
+      Example invalid feedback text
+    </div>
+  </div>
+
+  <div class="mb-3" aria-describedby="messageFeedbackRadioGroup">
+    <div class="form-check">
+      <input type="radio" class="form-check-input is-invalid" id="feedbackRadio1" name="radio-feedback" required>
+      <label class="form-check-label" for="feedbackRadio1">Toggle this radio</label>
+    </div>
+    <div class="form-check">
+      <input type="radio" class="form-check-input is-invalid" id="feedbackRadio2" name="radio-feedback" required>
+      <label class="form-check-label" for="feedbackRadio2">Or toggle this other radio</label>
+    </div>
+    <div class="invalid-feedback" id="messageFeedbackRadioGroup">
+      Example invalid feedback text
+    </div>
+  </div>
+
+  <div class="form-file">
+    <input type="file" class="form-file-input is-invalid" id="feedbackFile" aria-describedby="messageFeedbackFile" required>
+    <label class="form-file-label" for="feedbackFile">
+      <span class="form-file-text">Choose file...</span>
+      <span class="form-file-button">Browse</span>
+    </label>
   </div>
 </form>
 {{< /example >}}
@@ -246,57 +324,80 @@ Validation styles are available for the following form controls and components:
 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 >}}
-<form class="row g-3 needs-validation" novalidate>
-  <div class="col-md-4 position-relative">
-    <label for="validationTooltip01" class="form-label">First name</label>
-    <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
-    <div class="valid-tooltip">
-      Looks good!
+<form>
+  <div class="position-relative mb-5">
+    <input type="text" class="form-control is-valid" value="Form control" aria-describedby="messageTooltipFormControl" required>
+    <div class="valid-tooltip" id="messageTooltipFormControl">
+      Example valid feedback text
     </div>
   </div>
-  <div class="col-md-4 position-relative">
-    <label for="validationTooltip02" class="form-label">Last name</label>
-    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
-    <div class="valid-tooltip">
-      Looks good!
+
+  <div class="position-relative mb-5">
+    <textarea class="form-control is-valid" aria-describedby="messageTooltipTextarea" required>Textarea</textarea>
+    <div class="valid-tooltip" id="messageTooltipTextarea">
+      Example valid feedback text
     </div>
   </div>
-  <div class="col-md-4 position-relative">
-    <label for="validationTooltipUsername" class="form-label">Username</label>
+
+  <div class="position-relative mb-5">
     <div class="input-group">
-      <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
-      <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
-      <div class="invalid-tooltip">
-        Please choose a unique and valid username.
+      <div class="input-group-prepend">
+        <span class="input-group-text" id="tooltipInputGroupPrepend">@</span>
       </div>
+      <input type="text" class="form-control is-invalid" placeholder="Username" aria-label="Username" aria-describedby="tooltipInputGroupPrepend messageTooltipInputGroup" required>
+    </div>
+    <div class="invalid-tooltip" id="messageTooltipInputGroup">
+      Example invalid feedback text
     </div>
   </div>
-  <div class="col-md-6 position-relative">
-    <label for="validationTooltip03" class="form-label">City</label>
-    <input type="text" class="form-control" id="validationTooltip03" required>
-    <div class="invalid-tooltip">
-      Please provide a valid city.
-    </div>
-  </div>
-  <div class="col-md-3 position-relative">
-    <label for="validationTooltip04" class="form-label">State</label>
-    <select class="form-select" id="validationTooltip04" required>
-      <option selected disabled value="">Choose...</option>
-      <option>...</option>
+
+  <div class="position-relative mb-5">
+    <select class="form-select is-invalid" aria-describedby="messageTooltipSelect" required>
+      <option value="">Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
     </select>
-    <div class="invalid-tooltip">
-      Please select a valid state.
+    <div class="invalid-tooltip" id="messageTooltipSelect">
+      Example invalid feedback text
     </div>
   </div>
-  <div class="col-md-3 position-relative">
-    <label for="validationTooltip05" class="form-label">Zip</label>
-    <input type="text" class="form-control" id="validationTooltip05" required>
-    <div class="invalid-tooltip">
-      Please provide a valid zip.
+
+  <div class="position-relative mb-5">
+    <div class="form-check">
+      <input type="checkbox" class="form-check-input is-invalid" id="tooltipCheckbox" aria-describedby="messageTooltipCheckbox" required>
+      <label class="form-check-label" for="tooltipCheckbox">Check this checkbox</label>
+    </div>
+    <div class="invalid-tooltip" id="messageTooltipCheckbox">
+      Example invalid feedback text
     </div>
   </div>
-  <div class="col-12">
-    <button class="btn btn-primary" type="submit">Submit form</button>
+
+  <div class="position-relative mb-5" aria-describedby="messageTooltipRadioGroup">
+    <div class="form-check">
+      <input type="radio" class="form-check-input is-invalid" id="tooltipRadio1" name="radio-feedback" required>
+      <label class="form-check-label" for="tooltipRadio1">Toggle this radio</label>
+    </div>
+    <div class="form-check">
+      <input type="radio" class="form-check-input is-invalid" id="tooltipRadio2" name="radio-feedback" required>
+      <label class="form-check-label" for="tooltipRadio2">Or toggle this other radio</label>
+    </div>
+    <div class="invalid-tooltip" id="messageTooltipRadioGroup">
+      Example invalid feedback text
+    </div>
+  </div>
+
+  <div class="position-relative mb-5">
+    <div class="form-file">
+      <input type="file" class="form-file-input is-invalid" id="tooltipFile" aria-describedby="messageTooltipFile" required>
+      <label class="form-file-label" for="tooltipFile">
+        <span class="form-file-text">Choose file...</span>
+        <span class="form-file-button">Browse</span>
+      </label>
+    </div>
+    <div class="invalid-tooltip" id="messageTooltipFile">
+      Example invalid feedback text
+    </div>
   </div>
 </form>
 {{< /example >}}

From 754362ee6bf911cf8c4628a3adabba2610aa1e59 Mon Sep 17 00:00:00 2001
From: ysds <ysds.code@gmail.com>
Date: Wed, 18 Mar 2020 00:00:17 +0900
Subject: [PATCH 3/5] Associate validation feedbacks with their form

---
 site/content/docs/5.0/forms/validation.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 57a786380..37403feed 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -287,10 +287,10 @@ You can insert custom feedback messages with the `.valid-feedback` or `.invalid-
 
   <div class="mb-3">
     <div class="form-check">
-      <input type="checkbox" class="form-check-input is-invalid" id="feedbackCheckbox" required>
+      <input type="checkbox" class="form-check-input is-invalid" id="feedbackCheckbox" aria-describedby="messageFeedbackCheckbox" required>
       <label class="form-check-label" for="feedbackCheckbox">Check this checkbox</label>
     </div>
-    <div class="invalid-feedback">
+    <div class="invalid-feedback" id="messageFeedbackCheckbox">
       Example invalid feedback text
     </div>
   </div>
@@ -316,6 +316,9 @@ You can insert custom feedback messages with the `.valid-feedback` or `.invalid-
       <span class="form-file-button">Browse</span>
     </label>
   </div>
+  <div class="invalid-feedback" id="messageFeedbackFile">
+    Example invalid feedback text
+  </div>
 </form>
 {{< /example >}}
 

From 4c53d0b14eb483accfe58a091e2350b3722e780c Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 15 Jun 2020 01:10:55 -0700
Subject: [PATCH 4/5] Restore missing aria-label, add missing end of file line

---
 site/content/docs/5.0/forms/validation.md        | 2 +-
 site/static/docs/5.0/assets/js/validate-forms.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 37403feed..9e7f71e2c 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -274,7 +274,7 @@ You can insert custom feedback messages with the `.valid-feedback` or `.invalid-
   </div>
 
   <div class="mb-3">
-    <select class="form-select is-invalid" aria-describedby="messageFeedbackSelect" required>
+    <select class="form-select is-invalid" aria-describedby="messageFeedbackSelect" aria-label="Select example" required>
       <option value="">Open this select menu</option>
       <option value="1">One</option>
       <option value="2">Two</option>
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 11e00c8e8..2331f4255 100644
--- a/site/static/docs/5.0/assets/js/validate-forms.js
+++ b/site/static/docs/5.0/assets/js/validate-forms.js
@@ -18,4 +18,4 @@
         form.classList.add('was-validated');
       }, false)
     })
-})()
\ No newline at end of file
+})()

From a038d24643fad7e8e54bacbf5a0d09847146c45b Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 15 Jun 2020 01:14:21 -0700
Subject: [PATCH 5/5] Fix JS linter

---
 site/static/docs/5.0/assets/js/validate-forms.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 2331f4255..7895620a2 100644
--- a/site/static/docs/5.0/assets/js/validate-forms.js
+++ b/site/static/docs/5.0/assets/js/validate-forms.js
@@ -10,12 +10,12 @@
     .forEach(function (form) {
       form.addEventListener('submit', function (event) {
         if (!form.checkValidity()) {
-          event.preventDefault();
-          event.stopPropagation();
-          form.reportValidity();
+          event.preventDefault()
+          event.stopPropagation()
+          form.reportValidity()
         }
 
-        form.classList.add('was-validated');
+        form.classList.add('was-validated')
       }, false)
     })
 })()