Rectangle 27 45

<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).

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

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

Cool! But why not add the ng-class at the form element? It is a single element, and we can declare the CSS rule selector as form.submitted .ng-invalid

@J.Bruni: Yes. We can apply. So that we can reduce the code also. Thanks for the great idea.. :) I will update my answer.

I only managed to have it working when using addRelation.$submitted instead of simple submitted (Angular v1.3.16)

no need to add a ng-class, use : .ng-submitted .ng-invalid{...}

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs
Rectangle 27 43

<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).

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

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

Cool! But why not add the ng-class at the form element? It is a single element, and we can declare the CSS rule selector as form.submitted .ng-invalid

@J.Bruni: Yes. We can apply. So that we can reduce the code also. Thanks for the great idea.. :) I will update my answer.

I only managed to have it working when using addRelation.$submitted instead of simple submitted (Angular v1.3.16)

no need to add a ng-class, use : .ng-submitted .ng-invalid{...}

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs
Rectangle 27 11

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

Can you detail and, if possible, provide an example of how your solution works?

Great solution, this apply a class to children inputs when the form is submitted. form.ng-submitted input.ng-invalid { background: red; }. form.ng-submitted: this class is added to the form it's when submitted input.ng-invalid: child input class when are invalid So when the the form is submitted the form.ng-submitted is added to it. Now to access the children inputs use input.ng-invalid, looking for child invalid inputs this will add the style to invalid inputs with submitted form.

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs
Rectangle 27 11

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

Can you detail and, if possible, provide an example of how your solution works?

Great solution, this apply a class to children inputs when the form is submitted. form.ng-submitted input.ng-invalid { background: red; }. form.ng-submitted: this class is added to the form it's when submitted input.ng-invalid: child input class when are invalid So when the the form is submitted the form.ng-submitted is added to it. Now to access the children inputs use input.ng-invalid, looking for child invalid inputs this will add the style to invalid inputs with submitted form.

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs
Rectangle 27 6

I have created a working CodePen example to demonstrate how you might accomplish your goals.

I added ng-click to the <form> and removed the logic from your button:

<form name="addRelation" data-ng-click="save(model)">
...
<input class="btn" type="submit" value="SAVE" />
<section ng-app="app" ng-controller="MainCtrl">
  <form class="well" name="addRelation" data-ng-click="save(model)">
    <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.$invalid">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.$invalid">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>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
    <input class="btn" type="submit" value="SAVE" />  
  </form>
</section>

and controller code:

app.controller('MainCtrl', function($scope) {  
  $scope.save = function(model) {
    $scope.addRelation.submitted = true;

    if($scope.addRelation.$valid) {
      // submit to db
      console.log(model); 
    } else {
      console.log('Errors in form data');
    }
  };
});

Hi @Adam: Thanks for the reply. I checked the CodePan example you have created. when i click on save button errors are getting displayed under the invalid input fields. but i should get red border for all the invalid input fields(which is my actual requirement).

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs
Rectangle 27 6

I have created a working CodePen example to demonstrate how you might accomplish your goals.

I added ng-click to the <form> and removed the logic from your button:

<form name="addRelation" data-ng-click="save(model)">
...
<input class="btn" type="submit" value="SAVE" />
<section ng-app="app" ng-controller="MainCtrl">
  <form class="well" name="addRelation" data-ng-click="save(model)">
    <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.$invalid">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.$invalid">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>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
    <input class="btn" type="submit" value="SAVE" />  
  </form>
</section>

and controller code:

app.controller('MainCtrl', function($scope) {  
  $scope.save = function(model) {
    $scope.addRelation.submitted = true;

    if($scope.addRelation.$valid) {
      // submit to db
      console.log(model); 
    } else {
      console.log('Errors in form data');
    }
  };
});

Hi @Adam: Thanks for the reply. I checked the CodePan example you have created. when i click on save button errors are getting displayed under the invalid input fields. but i should get red border for all the invalid input fields(which is my actual requirement).

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs
Rectangle 27 0

I found the solutions after lot of experiment.

<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 chaging 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 the class attribute of all input fileds(there are some other classes intially added by angularjs).

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

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

Cool! But why not add the ng-class at the form element? It is a single element, and we can declare the CSS rule selector as form.submitted .ng-invalid

@J.Bruni: Yes. We can apply. So that we can reduce the code also. Thanks for the great idea.. :) I will update my answer.

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs
Rectangle 27 0

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

Can you detail and, if possible, provide an example of how your solution works?

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs
Rectangle 27 0

I have created a working CodePen example to demonstrate how you might accomplish your goals.

I added ng-click to the <form> and removed the logic from your button:

<form name="addRelation" data-ng-click="save(model)">
...
<input class="btn" type="submit" value="SAVE" />
<section ng-app="app" ng-controller="MainCtrl">
  <form class="well" name="addRelation" data-ng-click="save(model)">
    <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.$invalid">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.$invalid">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>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
    <input class="btn" type="submit" value="SAVE" />  
  </form>
</section>

and controller code:

app.controller('MainCtrl', function($scope) {  
  $scope.save = function(model) {
    $scope.addRelation.submitted = true;

    if($scope.addRelation.$valid) {
      // submit to db
      console.log(model); 
    } else {
      console.log('Errors in form data');
    }
  };
});

Hi @Adam: Thanks for the reply. I checked the CodePan example you have created. when i click on save button errors are getting displayed under the invalid input fields. but i should get red border for all the invalid input fields(which is my actual requirement).

validation - Show red border for all invalid fields after submitting f...

forms validation angularjs