Simplify form validation states while enabling them to be applied to one field at a time.

docs/assets/css/bootstrap.css

@@ -1116,117 +1116,57 @@ fieldset[disabled] input[type="checkbox"] {
   background-color: transparent;
 }
 
-.control-group.warning .control-label,
+.has-warning .control-label {
-.control-group.warning .help-block,
-.control-group.warning .help-inline {
   color: #c09853;
 }
 
-.control-group.warning .checkbox,
+.has-warning .input-with-feedback {
-.control-group.warning .radio,
+  padding-right: 32px;
-.control-group.warning input,
-.control-group.warning select,
-.control-group.warning textarea {
-  color: #c09853;
-}
-
-.control-group.warning input,
-.control-group.warning select,
-.control-group.warning textarea {
   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);
 }
 
-.control-group.warning input:focus,
+.has-warning .input-with-feedback:focus {
-.control-group.warning select:focus,
-.control-group.warning textarea: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;
 }
 
-.control-group.warning .input-prepend .add-on,
+.has-error .control-label {
-.control-group.warning .input-append .add-on {
-  color: #c09853;
-  background-color: #fcf8e3;
-  border-color: #c09853;
-}
-
-.control-group.error .control-label,
-.control-group.error .help-block,
-.control-group.error .help-inline {
   color: #b94a48;
 }
 
-.control-group.error .checkbox,
+.has-error .input-with-feedback {
-.control-group.error .radio,
+  padding-right: 32px;
-.control-group.error input,
-.control-group.error select,
-.control-group.error textarea {
-  color: #b94a48;
-}
-
-.control-group.error input,
-.control-group.error select,
-.control-group.error textarea {
   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);
 }
 
-.control-group.error input:focus,
+.has-error .input-with-feedback:focus {
-.control-group.error select:focus,
-.control-group.error textarea: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;
 }
 
-.control-group.error .input-prepend .add-on,
+.has-success .control-label {
-.control-group.error .input-append .add-on {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #b94a48;
-}
-
-.control-group.success .control-label,
-.control-group.success .help-block,
-.control-group.success .help-inline {
   color: #468847;
 }
 
-.control-group.success .checkbox,
+.has-success .input-with-feedback {
-.control-group.success .radio,
+  padding-right: 32px;
-.control-group.success input,
-.control-group.success select,
-.control-group.success textarea {
-  color: #468847;
-}
-
-.control-group.success input,
-.control-group.success select,
-.control-group.success textarea {
   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);
 }
 
-.control-group.success input:focus,
+.has-success .input-with-feedback:focus {
-.control-group.success select:focus,
-.control-group.success textarea: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;
 }
 
-.control-group.success .input-prepend .add-on,
-.control-group.success .input-append .add-on {
-  color: #468847;
-  background-color: #dff0d8;
-  border-color: #468847;
-}
-
 input:focus:invalid,
 textarea:focus:invalid,
 select:focus:invalid {
@@ -1381,7 +1321,8 @@ select:focus:invalid:focus {
 }
 
 .form-horizontal .control-group {
-  margin-bottom: 10px;
+  position: relative;
+  margin-bottom: 20px;
 }
 
 .form-horizontal .control-group:before,
@@ -1394,10 +1335,17 @@ select:focus:invalid:focus {
   clear: both;
 }
 
+.form-horizontal .control-group input,
+.form-horizontal .control-group select,
+.form-horizontal .control-group textarea,
+.form-horizontal .control-group .uneditable-input {
+  margin-bottom: 0;
+}
+
 .form-horizontal .control-group > .control-label {
   float: left;
   width: 160px;
-  padding-top: 5px;
+  padding-top: 6px;
   text-align: right;
 }
 

docs/css.html

@@ -1671,48 +1671,42 @@ For example, <code><section></code> should be wrapped
           <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
 
           <form class="bs-docs-example form-horizontal">
-            <div class="control-group warning">
+            <div class="control-group has-warning">
               <label class="control-label" for="inputWarning">Input with warning</label>
               <div class="controls">
-                <input type="text" id="inputWarning">
+                <input type="text" class="input-with-feedback" id="inputWarning">
-                <span class="help-inline">Something may have gone wrong</span>
               </div>
             </div>
-            <div class="control-group error">
+            <div class="control-group has-error">
               <label class="control-label" for="inputError">Input with error</label>
               <div class="controls">
-                <input type="text" id="inputError">
+                <input type="text" class="input-with-feedback" id="inputError">
-                <span class="help-inline">Please correct the error</span>
               </div>
             </div>
-            <div class="control-group success">
+            <div class="control-group has-success">
               <label class="control-label" for="inputSuccess">Input with success</label>
               <div class="controls">
-                <input type="text" id="inputSuccess">
+                <input type="text" class="input-with-feedback" id="inputSuccess">
-                <span class="help-inline">Woohoo!</span>
               </div>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="control-group warning"&gt;
+&lt;div class="control-group has-warning"&gt;
   &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputWarning"&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
-    &lt;span class="help-inline"&gt;Something may have gone wrong&lt;/span&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="control-group error"&gt;
+&lt;div class="control-group has-error"&gt;
   &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputError"&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
-    &lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="control-group success"&gt;
+&lt;div class="control-group has-success"&gt;
   &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputSuccess"&gt;
+    &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
-    &lt;span class="help-inline"&gt;Woohoo!&lt;/span&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>

docs/templates/pages/css.mustache

@@ -1611,48 +1611,42 @@ For example, <code><section></code> should be wrapped
           <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
 
           <form class="bs-docs-example form-horizontal">
-            <div class="control-group warning">
+            <div class="control-group has-warning">
               <label class="control-label" for="inputWarning">Input with warning</label>
               <div class="controls">
-                <input type="text" id="inputWarning">
+                <input type="text" class="input-with-feedback" id="inputWarning">
-                <span class="help-inline">Something may have gone wrong</span>
               </div>
             </div>
-            <div class="control-group error">
+            <div class="control-group has-error">
               <label class="control-label" for="inputError">Input with error</label>
               <div class="controls">
-                <input type="text" id="inputError">
+                <input type="text" class="input-with-feedback" id="inputError">
-                <span class="help-inline">Please correct the error</span>
               </div>
             </div>
-            <div class="control-group success">
+            <div class="control-group has-success">
               <label class="control-label" for="inputSuccess">Input with success</label>
               <div class="controls">
-                <input type="text" id="inputSuccess">
+                <input type="text" class="input-with-feedback" id="inputSuccess">
-                <span class="help-inline">Woohoo!</span>
               </div>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="control-group warning"&gt;
+&lt;div class="control-group has-warning"&gt;
   &lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputWarning"&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputWarning"&gt;
-    &lt;span class="help-inline"&gt;Something may have gone wrong&lt;/span&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="control-group error"&gt;
+&lt;div class="control-group has-error"&gt;
   &lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputError"&gt;
+    &lt;input type="text" class="input-with-feedback" id="inputError"&gt;
-    &lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="control-group success"&gt;
+&lt;div class="control-group has-success"&gt;
   &lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
   &lt;div class="controls"&gt;
-    &lt;input type="text" id="inputSuccess"&gt;
+    &lt;input type="text" class="input-with-feedback id="inputSuccess""&gt;
-    &lt;span class="help-inline"&gt;Woohoo!&lt;/span&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>

less/forms.less

@@ -342,15 +342,15 @@ input[type="checkbox"] {
 // --------------------------
 
 // Warning
-.control-group.warning {
+.has-warning {
   .formFieldState(@state-warning-text, @state-warning-text, @state-warning-background);
 }
 // Error
-.control-group.error {
+.has-error {
   .formFieldState(@state-error-text, @state-error-text, @state-error-background);
 }
 // Success
-.control-group.success {
+.has-success {
   .formFieldState(@state-success-text, @state-success-text, @state-success-background);
 }
 
@@ -523,15 +523,23 @@ select:focus:invalid {
 
   // Increase spacing between groups
   .control-group {
-    margin-bottom: @line-height-base / 2;
+    position: relative;
+    margin-bottom: @line-height-base;
     .clearfix();
+
+    input,
+    select,
+    textarea,
+    .uneditable-input {
+      margin-bottom: 0;
+    }
   }
 
   // Float the labels left
   .control-group > .control-label {
     float: left;
     width: @component-offset-horizontal - 20;
-    padding-top: 5px;
+    padding-top: 6px;
     text-align: right;
   }
 

less/mixins.less

@@ -122,25 +122,14 @@
 // FORMS
 // --------------------------------------------------
 
-// Mixin for form field states
 .formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
-  // Set the text color
+  // Color the label text
-  .control-label,
+  .control-label {
-  .help-block,
-  .help-inline {
     color: @text-color;
   }
-  // Style inputs accordingly
+  // Set the border and box shadow on specific inputs to match
-  .checkbox,
+  .input-with-feedback {
-  .radio,
+    padding-right: 32px; // to account for the feedback icon
-  input,
-  select,
-  textarea {
-    color: @text-color;
-  }
-  input,
-  select,
-  textarea {
     border-color: @border-color;
     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     &:focus {
@@ -149,13 +138,6 @@
       .box-shadow(@shadow);
     }
   }
-  // Give a small background color for input-prepend/-append
-  .input-prepend .add-on,
-  .input-append .add-on {
-    color: @text-color;
-    background-color: @background-color;
-    border-color: @text-color;
-  }
 }