mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-28 10:24:19 +01:00
drop the old validation styles and docs
This commit is contained in:
Mark Otto
parent
4831076d6e
commit
6c214ad4c2
@ -960,139 +960,6 @@ Our example forms show native textual `<input>`s above, but form validation styl
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.col-form-label`, `.form-control`, or custom form element will receive the validation styles.
|
||||
- Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state.
|
||||
- Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state.
|
||||
- You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
|
||||
- Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass.
|
||||
|
||||
### Defining states
|
||||
|
||||
Generally speaking, you'll want to use a particular state for specific types of feedback:
|
||||
|
||||
- **Danger** is great for when there's a blocking or required field. A user *must* fill in this field properly to submit the form.
|
||||
- **Warning** works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form.
|
||||
- And lastly, **success** is ideal for situations when you have per-field validation throughout a form and want to encourage a user through the rest of the fields.
|
||||
|
||||
{% comment %}
|
||||
{% callout warning %}
|
||||
#### Conveying validation state to assistive technologies and colorblind users
|
||||
|
||||
Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.
|
||||
|
||||
Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
|
||||
{% endcallout %}
|
||||
{% endcomment %}
|
||||
|
||||
### Examples
|
||||
|
||||
Here are some examples of the aforementioned classes in action. First up is your standard left-aligned fields with labels, help text, and validation messaging.
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success">
|
||||
<label class="form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control form-control-success" id="inputSuccess1">
|
||||
<div class="form-control-feedback">Success! You've done it.</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="form-control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control form-control-warning" id="inputWarning1">
|
||||
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<label class="form-control-label" for="inputDanger1">Input with danger</label>
|
||||
<input type="text" class="form-control form-control-danger" id="inputDanger1">
|
||||
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Those same states can also be used with horizontal forms.
|
||||
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<form>
|
||||
<div class="form-group row has-success">
|
||||
<label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name@example.com">
|
||||
<div class="form-control-feedback">Success! You've done it.</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row has-warning">
|
||||
<label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name@example.com">
|
||||
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row has-danger">
|
||||
<label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name@example.com">
|
||||
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Validate with grid
|
||||
|
||||
And in more complex grids.
|
||||
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<form>
|
||||
<div class="form-group has-danger">
|
||||
<label for="inputHorizontalDnger" class="form-control-label">Mailing address</label>
|
||||
<input type="text" class="form-control mb-2" placeholder="Street address">
|
||||
<div class="row gutters-sm">
|
||||
<div class="col-7">
|
||||
<input type="text" class="form-control is-validated" placeholder="City">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control is-validated" placeholder="State">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Zip">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-feedback">Something's not right with that field. Try again?</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Checkboxes and radios are also supported.
|
||||
|
||||
{% example html %}
|
||||
<div class="form-check has-success">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
|
||||
Checkbox with success
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check has-warning">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1">
|
||||
Checkbox with warning
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check has-danger">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1">
|
||||
Checkbox with danger
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## 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.
|
||||
|
||||
@ -314,68 +314,6 @@ $form-feedback-invalid-color: $red !default;
|
||||
}
|
||||
}
|
||||
|
||||
// .is-validated .form-control:invalid {
|
||||
// border-color: rgba(255,0,0,1);
|
||||
// }
|
||||
// .is-validated .form-control:invalid:focus {
|
||||
// box-shadow: 0 0 0 .2rem rgba(255,0,0,.2);
|
||||
// }
|
||||
// .is-validated .form-control:invalid + .form-control-invalid-text {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.form-control-feedback {
|
||||
margin-top: $form-feedback-margin-top;
|
||||
}
|
||||
|
||||
.form-control-success,
|
||||
.form-control-warning,
|
||||
.form-control-danger {
|
||||
padding-right: ($input-btn-padding-x * 3);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right ($input-height-inner / 4);
|
||||
background-size: ($input-height-inner / 2) ($input-height-inner / 2);
|
||||
}
|
||||
|
||||
.form-control-validated,
|
||||
.is-validated {
|
||||
padding-right: ($input-btn-padding-x * 3);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right ($input-height-inner / 4);
|
||||
background-size: ($input-height-inner / 2) ($input-height-inner / 2);
|
||||
}
|
||||
|
||||
// Form validation states
|
||||
.has-success {
|
||||
@include form-control-validation($brand-success);
|
||||
|
||||
.form-control-success,
|
||||
.form-control-validated,
|
||||
.is-validated {
|
||||
background-image: $form-icon-success;
|
||||
}
|
||||
}
|
||||
|
||||
.has-warning {
|
||||
@include form-control-validation($brand-warning);
|
||||
|
||||
.form-control-warning,
|
||||
.form-control-validated,
|
||||
.is-validated {
|
||||
background-image: $form-icon-warning;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
@include form-control-validation($brand-danger);
|
||||
|
||||
.form-control-danger,
|
||||
.form-control-validated,
|
||||
.is-validated {
|
||||
background-image: $form-icon-danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
|
||||
@ -1,59 +1,3 @@
|
||||
// Form validation states
|
||||
//
|
||||
// Used in _forms.scss to generate the form validation CSS for warnings, errors,
|
||||
// and successes.
|
||||
|
||||
@mixin form-control-validation($color) {
|
||||
// Color the label and help text
|
||||
.form-control-feedback,
|
||||
.form-control-label,
|
||||
.col-form-label,
|
||||
.form-check-label,
|
||||
.custom-control {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
// .form-control-validated,
|
||||
// .is-validated,
|
||||
// .custom-select,
|
||||
// .custom-file-control {
|
||||
// border-color: $color;
|
||||
//
|
||||
// &:focus {
|
||||
// @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
|
||||
// }
|
||||
// }
|
||||
|
||||
.is-validated {
|
||||
// Textual inputs
|
||||
&.form-control,
|
||||
&.custom-select,
|
||||
&.custom-file-control {
|
||||
border-color: $color;
|
||||
|
||||
&:focus {
|
||||
@include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
|
||||
}
|
||||
}
|
||||
|
||||
&.input-group {
|
||||
.input-group-addon {
|
||||
color: $color;
|
||||
background-color: lighten($color, 40%);
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // Set validation states also for addons
|
||||
// .input-group-addon {
|
||||
// color: $color;
|
||||
// background-color: lighten($color, 40%);
|
||||
// border-color: $color;
|
||||
// }
|
||||
}
|
||||
|
||||
// Form control focus state
|
||||
//
|
||||
// Generate a customized focus state and for any input with the specified color,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user