rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'form-check-input-validation' of https://github.com/supergibbs/bootstrap into supergibbs-form-check-input-validation

Browse Source
This commit is contained in:
Mark Otto 2018-01-15 21:39:27 -08:00
commit c8d9c0efcd
2 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/4.0/components/forms.md
View File

@ -776,6 +776,17 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied
</div> </div>
</div> </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> <button class="btn btn-primary" type="submit">Submit form</button>
</form> </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> <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
</div> </div>
</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> <button class="btn btn-primary" type="submit">Submit form</button>
</form> </form>
{% endexample %} {% endexample %}
@ -903,7 +922,17 @@ We recommend using client side validation, but in case you require server side,
</div> </div>
</div> </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> <button class="btn btn-primary" type="submit">Submit form</button>
</form> </form>
{% endexample %} {% endexample %}

5
scss/mixins/_forms.scss
View File

@ -74,6 +74,11 @@
~ .form-check-label { ~ .form-check-label {
color: $color; color: $color;
} }
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
} }
} }