Skip to content

B
bootstrap
Commit 27cedf71 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Update form validation states 

* Once again no longer applies to single inputs (this is a bit simpler,
but I'm open to new ideas) but the entire set of inputs, labels, and
help text within a particular element. However, the styles are not too
dependent on markup or layout, so they're super flexible.
* Simplified the markup in the validation docs examples to match latest
changes.
* Renamed `.form-state-validation` mixin to `.form-control-validation`
to match naming of prev commit.
parent 71d3d2c3
Show whitespace changes
Inline Side-by-side
Showing with 32 additions and 47 deletions
css.html
View file @ 27cedf71
......@@ -1496,51 +1496,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h3 id="forms-validation">Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
<ul>
<li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
<li>Add .input-with-feedback to the field(s) in question</li>
</ul>
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
<p>Bootstrap includes validation styles for error, warning, and success states on from controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</li>
<form class="bs-example form-horizontal">
<div class="has-warning">
<form class="bs-example">
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" class="form-control input-with-feedback" id="inputWarning">
</div>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="has-error">
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" class="form-control input-with-feedback" id="inputError">
<input type="text" class="form-control" id="inputError">
</div>
</div>
<div class="has-success">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" class="form-control input-with-feedback" id="inputSuccess">
</div>
<input type="text" class="form-control" id="inputSuccess">
</div>
</form>
{% highlight html %}
<div class="has-warning">
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" class="form-control input-with-feedback" id="inputWarning">
</div>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="has-error">
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" class="form-control input-with-feedback" id="inputError">
</div>
<input type="text" class="form-control" id="inputError">
</div>
<div class="has-success">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" class="form-control input-with-feedback" id="inputSuccess">
</div>
<input type="text" class="form-control" id="inputSuccess">
</div>
{% endhighlight %}
......
dist/css/bootstrap.css
View file @ 27cedf71
......@@ -1503,14 +1503,14 @@ select.input-small {
color: #c09853;
}
.has-warning .input-with-feedback {
.has-warning .form-control {
padding-right: 32px;
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .input-with-feedback:focus {
.has-warning .form-control:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
......@@ -1527,14 +1527,14 @@ select.input-small {
color: #b94a48;
}
.has-error .input-with-feedback {
.has-error .form-control {
padding-right: 32px;
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .input-with-feedback:focus {
.has-error .form-control:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
......@@ -1551,14 +1551,14 @@ select.input-small {
color: #468847;
}
.has-success .input-with-feedback {
.has-success .form-control {
padding-right: 32px;
border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .input-with-feedback:focus {
.has-success .form-control:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
......
dist/css/bootstrap.min.css
View file @ 27cedf71
This source diff could not be displayed because it is too large. You can view the blob instead.
less/forms.less
View file @ 27cedf71
......@@ -264,15 +264,15 @@ select {
// Warning
.has-warning {
.form-field-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
.form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
}
// Error
.has-error {
.form-field-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
.form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
}
// Success
.has-success {
.form-field-validation(@state-success-text, @state-success-text, @state-success-bg);
.form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
}
......
less/mixins.less
View file @ 27cedf71
......@@ -508,18 +508,20 @@
}
}
// Framework mixins
// --------------------------------------------------
// Generate form validation states
.form-field-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Color the label text
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
// Color the label and help text
.help-block,
.control-label {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.input-with-feedback {
.form-control {
padding-right: 32px; // to account for the feedback icon
border-color: @border-color;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment