AngularJS Validation In MVC - Part Five

Before starting the fifth part I  recommend that you please go through the below parts. 

• AngularJS Validation In MVC - Part One
• AngularJS Validation In MVC - Part Two
• AngularJS Validation In MVC - Part Three
• AngularJS Validation In MVC - Part Four

This part will teach you how to,

1. How to display validation summary using AngularJS

Initial requirement is reference, 

<script src="~/Scripts/angular.js"></script>

1. Add validation Summary Div in you project at location where you want to show the summary box.
   

   <div ng-show="myForm.$invalid">
   < div >

2. Remove all the control level validations add it in summary box as below,
   

   <div ng-show="myForm.$invalid">
       <ul> <span class="ValidationMessage" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
   <li ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</li>
   <li ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</li>
   </span> <span class="ValidationMessage" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
   <li ng-show="myForm.Student.$error.required">Student Name is required.</li>
   </span> <span class="ValidationMessage" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
   <li ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</li>
   <li ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</li>
   </span> <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
   <li ng-show="myForm.email.$error.required">Email is required.</li>
   <li ng-show="myForm.email.$error.email">Invalid email address.</li>
   </span> <span class="ValidationMessage" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
   <li ng-show="myForm.marks.$error.required">Email is required.</li>
   <li ng-show="myForm.marks.$error.number">Invalid number.</li>
   <li ng-show="myForm.marks.$error.max">Max Percentage is 100.</li>
   </span> </ul>
   </div>

3. Now Demo project 4 will be modified inthe below way hence my final code is as below,
   

   <form ng-app="myApp" ng-controller="validateCtrl"
   name="myForm" novalidate  style="width: 470px;margin: 0 auto;border:medium;margin-top:10%"  >
       <fieldset>
           <legend>Validation Demo</legend>
   
    <p>Student Roll Number:<br>
   <input type="number" name="StudentRollNumber" ng-model="StudentRollNumber" required>
   <img src="~/Content/TickMark.png"  ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$valid" Class="iconClass" />
   <img src="~/Content/Cross.png"  ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid" Class="iconClass" />
   </p>
   
   
    <p>Student Name:<br>
   <input type="text" name="Student" ng-model="Student" required>
   <img src="~/Content/TickMark.png"  ng-show="myForm.Student.$dirty && myForm.Student.$valid" Class="iconClass" />
   <img src="~/Content/Cross.png"  ng-show="myForm.Student.$dirty && myForm.Student.$invalid" Class="iconClass" />
   </p>
   
   <p>Student Birth Date:<br>
   <input type="date" name="BirthDate" ng-model="BirthDate" required placeholder="yyyy-MM-dd">
   <img src="~/Content/TickMark.png"  ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$valid" Class="iconClass" />
   <img src="~/Content/Cross.png"  ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid" Class="iconClass" />
   </p>
   
   
   
   <p>Student Email:<br>
   <input type="email" name="email" ng-model="email" required>
   <img src="~/Content/TickMark.png"  ng-show="myForm.email.$dirty && myForm.email.$valid" Class="iconClass" />
   <img src="~/Content/Cross.png"  ng-show="myForm.email.$dirty && myForm.email.$invalid" Class="iconClass" />
   </p>
   
   <p>Student Percentage Marks:<br>
   <input type="number" name="marks" ng-model="marks" max="100" required>
   <img src="~/Content/TickMark.png"  ng-show="myForm.marks.$dirty && myForm.marks.$valid" Class="iconClass" />
   <img src="~/Content/Cross.png"  ng-show="myForm.marks.$dirty && myForm.marks.$invalid" Class="iconClass" />
   </p>
   
    <button ng-disabled="myForm.$invalid">Save</button>
   
   <div ng-show="myForm.$invalid">
   <ul>
   <span class="ValidationMessage" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid" >
   <li ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</li>
   <li ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</li>
   </span>
   
   <span class="ValidationMessage" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
   <li ng-show="myForm.Student.$error.required">Student Name is required.</li>
   </span>
   
   <span class="ValidationMessage" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid" >
   <li ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</li>
   <li ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</li>
   </span>
   
   <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
   <li ng-show="myForm.email.$error.required">Email is required.</li>
   <li ng-show="myForm.email.$error.email">Invalid email address.</li>
   </span>
   
   
   <span class="ValidationMessage" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
   <li ng-show="myForm.marks.$error.required">Email is required.</li>
   <li ng-show="myForm.marks.$error.number">Invalid number.</li>
   <li ng-show="myForm.marks.$error.max">Max Percentage is 100.</li>
   </span>
   </ul>
   
   </div>
   
    </fieldset>
   </form>
   
       <script>
           var app = angular.module('myApp', []);
           app.controller('validateCtrl', function ($scope) {
               StudentRollNumber = 12;
               BirthDate = new Date(2013, 9, 22);
           });
   </script>
   
   <style>
   input.ng-invalid {
       background-color: pink;
   }
   input.ng-valid {
       background-color: lightgreen;
   }
   form.ng-pristine {
       background-color: lightblue;
   }
   
       .ValidationMessage {
           color:red; font-size:x-small
       }
   
       .iconClass {
           width:10px;
           height:10px
       }
   </style>

4. Run the project you will find in the application as below,
   
   

Hope you will enjoy displaying validation summary box.