title: AngularJS + Bootstrap - Validating Text Box - how to show validation feedback only after the user has entered some data?
body: <p>I am doing some validation on text boxes. Once the user enters a valid input, the text box should become green and a tick mark should appear at the rightmost corner. Similarly, if the user has entered an invalid data, text box should become red and a cross should appear instead.</p>
  
  <p>For this, I'm using bootstrap's '<code>has-error has-feedback'</code> and <code>'has-success has-feedback'</code> css classes.</p>
  
  <p>My problem is that the textbox is green and has a tick even when the page is loaded for the first time. I need the validation feedback to appear only after the user has entered an input. And the same applies when the form is used to edit the existing records. How can I achieve this ?  (I'm not sure if I could use <code>$dirty</code> and '$pristine` to solve this problem)</p>
  
  <p>Below is my Markup.</p>
  
  <pre><code>&lt;div class="form-group" ng-class="(Form.emailAddress.$valid) ? 'has-success has-feedback': 'has-error has-feedback'"&gt;
      &lt;label for="emailAddress"&gt;Email address&lt;/label&gt;
      &lt;span ng-show="!Form.emailAddress.$valid"&gt;Please enter a valid address&lt;/span&gt;
  
      &lt;input type="email" class="form-control" id="emailAddress" name="emailAddress" ng-model="Data.emailAddress" ng-pattern="validationPattern" ng-maxlength="20"&gt;
  
      &lt;span ng-show="Form.emailAddress.$valid" class="glyphicon glyphicon-ok form-control-feedback"&gt;&lt;/span&gt;
      &lt;span ng-show="!Form.emailAddress.$valid" class="glyphicon glyphicon-remove  form-control-feedback"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>A few more questions regarding this topic.</p>
  
  <p>I would like to check the maxlength of the email as well, and if it exceeds 20, I would want to show a different message. I tried Form.emailAddress.$maxlength but couldn't get it working. Does it maxlength work on 'email' types as well ?</p>
  
  <p>How can I show the feedback after the user moves to the next textbox instead of showing it while typing ? May be something similar to jquery's 'focusout()'.</p>
  
  <p>I've used a validation pattern in the controller because email is not a required field, but when entered it has to be valid. Could I please know if there are better ways than doing this ?</p>
  
  <p>Any help would be much appreciated. Thanks</p>