diff options
| author | Mark Otto <[email protected]> | 2018-01-15 21:39:27 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-01-15 21:39:27 -0800 |
| commit | c8d9c0efcd64f4e3f47777daa6bec8df0839aebb (patch) | |
| tree | b02d371c78b1c383c6fdb60413711876ed338b4a | |
| parent | b5039d594b6a7bc4ec7db8139d924f07a419b35d (diff) | |
| parent | 20a251a597807ba9e423bafac5d1f531c80bedf5 (diff) | |
| download | bootstrap-c8d9c0efcd64f4e3f47777daa6bec8df0839aebb.tar.xz bootstrap-c8d9c0efcd64f4e3f47777daa6bec8df0839aebb.zip | |
Merge branch 'form-check-input-validation' of https://github.com/supergibbs/bootstrap into supergibbs-form-check-input-validation
| -rw-r--r-- | docs/4.0/components/forms.md | 31 | ||||
| -rw-r--r-- | scss/mixins/_forms.scss | 5 |
2 files changed, 35 insertions, 1 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index a51693e14..1f3bb680d 100644 --- 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 index 627e0dc82..229068242 100644 --- 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; + } } } |