title: how to turn border color red if input is not valid only when clicked outside of the input field but not at the time of filling the textbox.?
body: <p>i am trying to do like this but border color turns red even i type a single letter into the input field and not getting normal till the input is valid.
  i am wishing to turn the border color red on invalid input but after clicking outside of that textbox.
  please provide some solution.</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
   &lt;style&gt;
  input.ng-invalid.ng-dirty{border:1px solid red;}
      textarea.ng-invalid.ng-dirty{border:1px solid red;}
      /*button{width: 100px;height: 30px;}*/
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div ng-controller="myCtrl" class="form-contact-in"&gt;
                        &lt;form name="frm" ng-submit="submit(frm.$valid)"&gt;
                          &lt;input name="name"
                                 type="text" 
                                 ng-model="user.name"
                                 placeholder="Name"
                                 ng-minlength="3"
                                 ng-maxlength="15"
                                 class="contactusform" 
                                 required&gt;
                                 &lt;span ng-show="frm.name.$dirty &amp;&amp; frm.name.$error.required"&gt;Name Required&lt;/span&gt;
                                 &lt;span ng-show="frm.name.$dirty &amp;&amp; frm.name.$error.minlength"&gt;too short&lt;/span&gt;
                                 &lt;span ng-show="frm.name.$dirty &amp;&amp; frm.name.$error.maxlength"&gt;too long&lt;/span&gt;&lt;br&gt;
  
                          &lt;input name="email"
                                 type="email"
                                 ng-model="user.email" 
                                 placeholder="Email" 
                                 class="contactusform" 
                                 required&gt;
                                 &lt;span ng-show="frm.email.$dirty &amp;&amp; frm.email.$error.required"&gt;Email Required&lt;/span&gt;
                                 &lt;span ng-show="frm.email.$dirty &amp;&amp; frm.email.$error.email"&gt;Enter a valid email&lt;/span&gt;&lt;br&gt;
  
                          &lt;input type="number" 
                                 placeholder="Phone Number" 
                                 name="mobile"
                                 ng-model="user.mobile" 
                                 ng-pattern="mobRegex"
                                 ng-minlength="10"
                                 class="contactusform"                             
                                 required&gt;  
                                 &lt;span ng-show="frm.mobile.$dirty &amp;&amp; frm.mobile.$error.required"&gt;required&lt;/span&gt;
                                 &lt;span ng-show="frm.mobile.$dirty &amp;&amp; frm.mobile.$error.number"&gt;required&lt;/span&gt;
                                 &lt;span ng-show="frm.mobile.$dirty &amp;&amp; frm.mobile.$error.pattern"&gt;Required a valid mobile no.&lt;/span&gt;&lt;br&gt;                          
  
  
                           &lt;textarea name="message" 
                                     cols="20" 
                                     rows="4" 
                                     placeholder="Message"
                                     class="contactusform" 
                                     ng-model="user.message" 
                                     ng-minlength="5"                               
                                     required&gt;                                   
                           &lt;/textarea&gt;
                                  &lt;span ng-show="frm.message.$dirty &amp;&amp; frm.message.$error.required"&gt;required&lt;/span&gt;
                                  &lt;span ng-show="frm.message.$dirty &amp;&amp; frm.message.$error.minlength"&gt;at least 5 chars needed&lt;/span&gt;&lt;br&gt;
                          &lt;div class="buttonsec2contactpage"&gt;
                          &lt;button type="submit" class="button-contactform2"&gt;SEND&lt;/button&gt;
                          &lt;/div&gt;
  
                          &lt;p id="contactSubmitMessage"&gt;
                          &lt;/p&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
  &lt;script src="https://code.angularjs.org/1.2.3/angular.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function($scope, $http) {
          $scope.mobRegex=/^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
          $scope.submit=function(){
  
              console.log("mobile"+ $scope.user.mobile);
  
  
          };
      });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>