Adding back the valid class. CLeaning up the error/ok messages.

css/style.uni-form.css

@@ -250,19 +250,19 @@
     border-radius: 3px;
   }
 
+/* Holder error */
+
 .uni-form .ctrl-holder.error,
 .uni-form .ctrl-holder.focused.error {
-  background: #ffdfdf;
+  background-color: #ffdfdf;
   border-color: #f3afb5;
 }
 
     .uni-form .ctrl-holder.error input.error,
     .uni-form .ctrl-holder.error select.error,
     .uni-form .ctrl-holder.error textarea.error {
       color: #af4c4c;
-      margin: 0 0 6px 0;
-      padding: 4px;
-      border: 1px solid #c55f68;
+      border-color: #c55f68;
     }
 
 /* Success messages at the top of the form */
@@ -279,3 +279,20 @@
     .uni-form #okMsg p {
       margin: 0
     }
+
+/* Holder valid input */
+
+.ctrl-holder.valid {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAABpElEQVRIiWNgGAWDAfTvV+2vX6W0/v//UAN0OUZqWbLsoV7BodXv+mF8fUeexkzjGw0wPhM1LPn/v0LhyLp39chiF/d/qUf2GTM1LPqp/GT99y//NJDF2DiZHniZHa+E8Sn20bKHegUfXv1xQBefmGUeiMynyKL//0MNkOMFBvQdeRoZGVdfQBajKOi+yHzd/vvnfwlkMW5+5gvVPncj0dWS7aPpZzUavn78i5GMe1LMErGpJ8ui//9DDS7u/1KPLo4tyGAAI+j+/w81+Kn8bXndaiXGxU3PsWoiJchgAMVH//+HGmRPOL7/w6s/DusmvJq/649RAroGUoMMq0XZE47v//eXQQDGR7eMnCDDahE2ALPs///7AiVzTs1HlxcQYzmAXNTgAihlHSzokH2FbCB6xmRiZvgwtSDGkJGx4wEhi1B8xMi4+sLUAktHJmaGD+gKseV+myChRmIswbCIkGXIQECM5UCU/KUJxFiC1SJiLGNiZvjQHhuBN5URZREhy0gJMoIW4bKM1CAjCfz/H2pQv0ppfesW5fn//9/HSJGjgKYAAELOyUHrhNdJAAAAAElFTkSuQmCC);
+  background-position: 99% 1em;
+  background-repeat: no-repeat;
+  background-size: 18px auto;
+}
+
+  .ctrl-holder.valid .input-text,
+  .ctrl-holder.valid .input-select,
+  .ctrl-holder.valid textarea,
+  .ctrl-holder.valid select {
+    border-color: #88a24f;
+    color: #88a24f;
+  }

demos/fauxform.html

@@ -84,9 +84,9 @@ <h2 class="uni-form-title">Form Title</h2>
 
           <h3>Default Form Field Layout</h3>
 
-          <div class="ctrl-holder">
+          <div class="ctrl-holder valid">
             <label for=""><em>*</em> Default text input</label>
-            <input name="" id="" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="input-text large"/>
+            <input name="" id="" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="input-text" value="Valid value">
             <p class="form-hint">This is a form hint.</p>
           </div>
 
@@ -98,7 +98,7 @@ <h3>Default Form Field Layout</h3>
 
           <div class="ctrl-holder error" id="error1">
             <label for=""><em>*</em> Medium text input</label>
-            <input name="" id="" value="Invalid value" size="35" maxlength="50" type="text" class="input-text medium error"/>
+            <input name="" id="" data-default-value="Placeholder text" value="Invalid value" size="35" maxlength="50" type="text" class="input-text medium error"/>
             <p class="form-hint">.medium on .input-text</p>
           </div>