Show red border for all invalid fields after submitting form angularjs

Question

I have a form in which I have some input fields. Some of them are required fields and some are email fields.

I am using HTML5 required attribute for required fields and type="email" attribute for email fields.

My question is after clicking on submit button i have to show red border for all the invalid fields.

This is my form:

<form name="addRelation">   <label>First Name</label>   <input type="text" placeholder="First Name" data-ng-model="model.firstName"     id="FirstName" name="FirstName" required/><br/>   <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/>   <label>Last Name</label>   <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>   <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">Last Name is required</span><br/>   <label>Email</label>   <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>   <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/>   <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>    <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" />     </form> 

and my save function.

$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;     } };  }) 

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.

I have tried following cases:

input.ng-dirty.ng-invalid{border:1px solid black;} 

but this fails when a user click on submit button directly.(without touching input fields)

input.ng-invalid{border:1px solid black;} 

this shows the red border as soon as user opens a signup form.

Please help.

Answer 1

Reference article: Show red color border for invalid input fields angualrjs

I used ng-class on all input fields.like below

<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/> 

when I click on save button I am changing newEmployee.submitted value to true(you can check it in my question). So when I click on save, a class named submitted gets added to all input fields(there are some other classes initially added by angularjs).

So now my input field contains classes like this

class="ng-pristine ng-invalid submitted" 

now I am using below css code to show red border on all invalid input fields(after submitting the form)

input.submitted.ng-invalid {   border:1px solid #f00; } 

Thank you !!

Update:

We can add the ng-class at the form element instead of applying it to all input elements. So if the form is submitted, a new class(submitted) gets added to the form element. Then we can select all the invalid input fields using the below selector

form.submitted .ng-invalid {     border:1px solid #f00; } 

Answer 2

you can use default ng-submitted is set if the form was submitted.

https://docs.angularjs.org/api/ng/directive/form

example: http://jsbin.com/cowufugusu/1/