rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Move the input groups validation workaround in docs.

Browse Source
This commit is contained in:
XhmikosR 2020-05-12 10:14:10 +03:00
parent 842b0d2ae4
commit 0f26be5ff3
2 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/docs/4.4/assets/scss/_component-examples.scss
View File

@ -333,6 +333,10 @@
}
}
.bd-example-forms-input-group-workaround .fix-rounded-right {
@include border-right-radius(.2rem !important);
}
//
// Code snippets
//

74
site/docs/4.4/components/forms.md
View File

@ -752,6 +752,12 @@ We currently recommend using custom validation styles, as native browser default
{% endcapture %}
{% include callout.html content=callout type="warning" %}
{% capture callout %}
##### Input group validation
Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this workaround](#input-group-validation-workaround).
{% endcapture %}
{% include callout.html content=callout type="warning" %}
### How it works
Here's how form validation works with Bootstrap:
@ -976,12 +982,6 @@ Validation styles are available for the following form controls and components:
- `.custom-checkbox`s and `.custom-radio`s
- `.custom-file`
{% capture callout %}
##### Input group validation
Input groups have difficulty with validation styles, unfortunately. Our recommendation is to place feedback messages as sibling elements of the `.input-group` that has `.is-{valid|invalid}`. Placing feedback messages within input groups breaks the `border-radius`. [See this comment for a workaround](https://github.com/twbs/bootstrap/issues/25110#issuecomment-586565165).
{% endcapture %}
{% include callout.html content=callout type="warning" %}
{% capture example %}
<form class="was-validated">
<div class="mb-3">
@ -1153,6 +1153,68 @@ $form-validation-states: map-merge(
}
{% endhighlight %}
### Input group validation workaround
When you are using a medium size input group and don't customize the default border radius values, add `.rounded-right` to the missing border radius elements:
{% highlight html %}
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control rounded-right" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
{% endhighlight %}
<div class="bd-example bd-example-forms-input-group-workaround">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control is-invalid rounded-right" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
When you are using a small or large input-group or customizing the default border radius values, add custom CSS to the missing border radius elements:
{% highlight css %}
/* Change values to match the radius of your form control */
.fix-rounded-right {
border-top-right-radius: .2rem !important;
border-bottom-right-radius: .2rem !important;
}
{% endhighlight %}
{% highlight html %}
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control fix-rounded-right" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
{% endhighlight %}
<div class="bd-example bd-example-forms-input-group-workaround">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control is-invalid fix-rounded-right" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
## Custom forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control.