title: How to use ng-show, ng-change, & ng-class to style validation hints/errors
body: <p>I would like to present my user with 2 types of validation:</p>
  
  <ol>
  <li>while they are typing in an input field, I'd like a hint to show up next to the input with a friendly, grey/black hint box if the current value is invalid</li>
  <li>then, when they blur out of the input, if the entered value is still invalid, I'd like to change the style of the hint to a more traditional red prompt. When they come back to the input to fix it, I'd like to return to the friendly hints in #1.</li>
  </ol>
  
  <p>I'd like to reuse the hint boxes to cut down on clutter (meaning I don't want a <code>div</code> for the friendly version of a hint, and a <code>div</code> for the traditional version of the exact same validation failure), and I'd like to use angular's validation markup (<code>ng-maxlength</code>, <code>ng-pattern</code>, etc) to allow me to respond to the user's input in helpful ways, like saying "numbers only" if they are entering text in an "Age" input, or "That value is too high" if they try to put "1000" as the age.</p>
  
  <p>I have a working example (sortof), but I feel there may perhaps be a better way to do this, (perhaps using directives?) but if nothing else, I don't see why my current solution is failing. I think I'm just missing something in the jquery selector, but any help would be great. </p>
  
  <p>Specifically, when the user is typing in the input, the friendly hint doesn't have the correct style.  Easy jquery fix? Any thoughts on a more concise solution? Thanks in advance.</p>
  
  <p><a href="http://plnkr.co/edit/s4JzMCLN3qFXgA8FMMSb?p=preview" rel="nofollow">plunkr</a></p>
  
  <p>Html:</p>
  
  <pre><code>    &lt;body ng-controller="MyCtrl"&gt;
      &lt;label class="control-label"&gt;Number of Dependents:&lt;/label&gt;
      &lt;form name="demographicsform"&gt;
        &lt;div ng-class="{true: 'control-group error', false: 'control-group'}[demographicsform.dependents.$invalid]"&gt;
          &lt;input type="text"
                  class="mini-input control"
                  id="dependents"
                  name="dependents"
                  ng-model="demographicsHolder.dependents"
                  ng-pattern="/^([1-9][0-9]?|)$/"
                  ng-change="change('dependentsValidation')"
                  maxlength="2"
                  required /&gt;
  
          &lt;!-- This error should fire when the input is the wrong type (text/number/etc) or format--&gt;
          &lt;div class="validation-err help-inline error"
                name="dependentsValidationPattern"
                ng-show="demographicsform.dependents.$error.pattern"&gt;
            A 2 digit number is required
          &lt;/div&gt;
          &lt;!-- This error should fire when the input is empty --&gt;
          &lt;div class="validation-err help-inline error"
                name="dependentsValidationRequired"
                ng-show="demographicsform.dependents.$error.required"&gt;
              Required field
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;        
      &lt;/body&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.controller('MyCtrl', function($scope) {
  
    $scope.demographicsHolder = {name:"bob",dependents:1};
  
    $scope.change = function(validationDivs) {
      $( validationDivs ).removeClass( ".validation-err" );
      $( validationDivs ).addClass( ".validation-hint" );
  
      $( "#" + elemId ).blur(function() {
        $( "#" + elemId ).removeClass( ".validation-hint" );
        $( "#" + elemId ).addClass( ".validation-err" );
      });
    };
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  .validation-hint {
        background-color: #0e0e0e;
    }
  
    .validation-err {
      background-color: #ffe5e5;
    }
  </code></pre>
  
  <p>The validation works as I want, but I want the hint to show up and be styled as desired while the user is actually typing in the box.</p>