Merge branch 'form-check-input-validation' of https://github.com/supe…

…rgibbs/bootstrap into supergibbs-form-check-input-validation
twbs · Jan 16, 2018 · c8d9c0e · c8d9c0e
2 parents b5039d5 + 20a251a
commit c8d9c0e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
@@ -776,6 +776,17 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied
   </div>
  </div>
  </div>
+ <div class="form-group">
+ <div class="form-check">
+  <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
+  <label class="form-check-label" for="invalidCheck">
+  I agree
+  </label>
+  <div class="invalid-feedback">
+  You must agree
+  </div>
+ </div>
+ </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
 
@@ -842,6 +853,14 @@ While these feedback styles cannot be styled with CSS, you can still customize t
   <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
  </div>
  </div>
+ <div class="form-group">
+ <div class="form-check">
+  <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
+  <label class="form-check-label" for="invalidCheck2">
+  I agree
+  </label>
+ </div>
+ </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
 {% endexample %}
@@ -903,7 +922,17 @@ We recommend using client side validation, but in case you require server side,
   </div>
  </div>
  </div>
-
+ <div class="form-group">
+ <div class="form-check">
+  <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
+  <label class="form-check-label" for="invalidCheck3">
+  I agree
+  </label>
+  <div class="invalid-feedback">
+  You must agree
+  </div>
+ </div>
+ </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
 {% endexample %}

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
@@ -74,6 +74,11 @@
  ~ .form-check-label {
  color: $color;
  }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
  }
  }