Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v4: Change input group validation examples #30180

Merged
merged 6 commits into from Apr 30, 2020
Merged

v4: Change input group validation examples #30180

Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
895e9d0
Change input group examples
ysds Feb 15, 2020
cb75f39
Merge branch 'v4-dev' into v4-dev-validation-feedback
XhmikosR Mar 17, 2020
f56c3b5
Update forms.md
ysds Mar 17, 2020
9a2cc7b
Update site/docs/4.4/components/forms.md
mdo Apr 30, 2020
1193cf7
Merge branch 'v4-dev' into v4-dev-validation-feedback
XhmikosR Apr 30, 2020
9d59f9f
Merge branch 'v4-dev' into v4-dev-validation-feedback
MartijnCuppens Apr 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
117 changes: 60 additions & 57 deletions site/docs/4.4/components/forms.md
View file
Open in desktop
Expand Up @@ -776,32 +776,20 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
{% capture example %}
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<div class="col-md-6 mb-3">
<label for="validationCustom01">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 mb-3">
<div class="col-md-6 mb-3">
<label for="validationCustom02">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 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
Expand Down Expand Up @@ -875,23 +863,14 @@ While these feedback styles cannot be styled with CSS, you can still customize t
{% capture example %}
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-4 mb-3">
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
<div class="col-md-4 mb-3">
<label for="validationDefaultUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend2">@</span>
</div>
<input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
Expand Down Expand Up @@ -930,32 +909,20 @@ We recommend using client-side validation, but in case you require server-side v
{% capture example %}
<form>
<div class="form-row">
<div class="col-md-4 mb-3">
<div class="col-md-6 mb-3">
<label for="validationServer01">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 mb-3">
<div class="col-md-6 mb-3">
<label for="validationServer02">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 mb-3">
<label for="validationServerUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
</div>
<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>
<div class="form-row">
<div class="col-md-6 mb-3">
Expand Down Expand Up @@ -1003,12 +970,18 @@ 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)
- `<input>`s and `<textarea>`s with `.form-control`
- `<select>`s with `.form-control` or `.custom-select`
- `.form-check`s
- `.custom-checkbox`s and `.custom-radio`s
- `.custom-file`

{% capture callout %}
##### Input group validations
For input groups, put feedback messages as a sibling element of the input group and add the `.is-{valid|invalid}` class to the `.input-group`. Placing feedback messages in a input group encounters border radius issues. [See this comment for workaround](https://github.com/twbs/bootstrap/issues/25110#issuecomment-586565165).
mdo marked this conversation as resolved.
Show resolved Hide resolved
mdo marked this conversation as resolved.
Show resolved Hide resolved
{% endcapture %}
{% include callout.html content=callout type="warning" %}

{% capture example %}
<form class="was-validated">
<div class="mb-3">
Expand All @@ -1035,21 +1008,63 @@ Validation styles are available for the following form controls and components:
<div class="invalid-feedback">More example invalid feedback text</div>
</div>

<div class="form-group">
<div class="mb-3">
<select class="custom-select" required>
<option value="">Open this select menu</option>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>

<div class="custom-file">
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>

<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>

<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>

<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
{% endcapture %}
{% include example.html content=example %}
Expand All @@ -1061,32 +1076,20 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
{% capture example %}
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<div class="col-md-6 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<div class="col-md-6 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTooltipUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
</div>
<input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
Expand Down