title: Show red border for all invalid fields after submitting form angularjs
body: <p>I have a form in which I have some input fields. Some of them are <strong>required</strong> fields and some are <strong>email</strong> fields. </p>
  
  <p>I am using HTML5 <strong>required</strong> attribute for required fields and <strong>type="email"</strong> attribute for email fields.</p>
  
  <p>My question is after clicking on submit button i have to show <strong>red border</strong> for all the invalid fields. </p>
  
  <p>This is my form:</p>
  
  <pre><code>&lt;form name="addRelation"&gt;
    &lt;label&gt;First Name&lt;/label&gt;
    &lt;input type="text" placeholder="First Name" data-ng-model="model.firstName"     id="FirstName" name="FirstName" required/&gt;&lt;br/&gt;
    &lt;span class="text-error" data-ng-show="addRelation.submitted &amp;&amp; addRelation.FirstName.$error.required"&gt;first Name is required&lt;/span&gt;&lt;br/&gt;
    &lt;label&gt;Last Name&lt;/label&gt;
    &lt;input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/&gt;&lt;br/&gt;
    &lt;span class="text-error" data-ng-show="addRelation.submitted &amp;&amp; addRelation.LastName.$error.required"&gt;Last Name is required&lt;/span&gt;&lt;br/&gt;
    &lt;label&gt;Email&lt;/label&gt;
    &lt;input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/&gt;&lt;br/&gt;
    &lt;span class="text-error" data-ng-show="addRelation.submitted &amp;&amp; addRelation.Email.$error.required"&gt;Email address is required&lt;/span&gt;&lt;br/&gt;
    &lt;span class="text-error" data-ng-show="addRelation.submitted &amp;&amp; addRelation.Email.$error.email"&gt;Email address is not valid&lt;/span&gt;&lt;br/&gt;
  
    &lt;input class="btn" data-ng-click="save(model)" type="button" value="SAVE" /&gt;  
    &lt;/form&gt;
  </code></pre>
  
  <p>and my save function.</p>
  
  <pre><code>$scope.save= function (model) {
      if ($scope.addRelation.$valid) {
          //form is valid- so save it to DB
      }
      else {
          //if form is not valid set $scope.addRelation.submitted to true
          $scope.addRelation.submitted=true;
      }
  };
   })
  </code></pre>
  
  <p>Now, when i click on save button without filling anything all the errors(spans) are getting displayed. But i want to show red border for all the invalid fields.</p>
  
  <p>I have tried following cases:</p>
  
  <pre><code>input.ng-dirty.ng-invalid{border:1px solid black;}
  </code></pre>
  
  <p>but this fails when a user click on submit button directly.(without touching input fields)</p>
  
  <pre><code>input.ng-invalid{border:1px solid black;}
  </code></pre>
  
  <p>this shows the red border as soon as user opens a signup form. </p>
  
  <p>Please help.</p>