From 8aa003b11a25282c063ce6db51c932030156ccaf Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 28 Nov 2017 13:59:17 -0800
Subject: [PATCH 1/2] Only apply validation styles to required form controls

---
 scss/mixins/_forms.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index b7e664db7335..10e163543164 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -50,8 +50,8 @@
     border-radius: .2rem;
   }
 
-  .form-control,
-  .custom-select {
+  .form-control:required,
+  .custom-select:required {
     .was-validated &:#{$state},
     &.is-#{$state} {
       border-color: $color;
@@ -70,7 +70,7 @@
 
 
   // TODO: redo check markup lol crap
-  .form-check-input {
+  .form-check-input:required {
     .was-validated &:#{$state},
     &.is-#{$state} {
       + .form-check-label {
@@ -80,7 +80,7 @@
   }
 
   // custom radios and checks
-  .custom-control-input {
+  .custom-control-input:required {
     .was-validated &:#{$state},
     &.is-#{$state} {
       ~ .custom-control-indicator {

From 9488808e6b3607bbd721e4829588c74bb5ffdc37 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 28 Nov 2017 14:00:03 -0800
Subject: [PATCH 2/2] add mention of required attr to docs

---
 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 eba9fc75f461..dcb50155fae5 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -707,7 +707,7 @@ We **highly recommend** custom validation styles as native browser defaults are
 
 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.
+- HTML form validation is applied via CSS's two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements with the `required` attribute.
 - 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).
 - 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.