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

1. Add validation Summary Div in you project at location where you want to show the summary box.
   
   1. <div ng-show="myForm.$invalid">
   2. < div >
2. Remove all the control level validations add it in summary box as below,
   
   1. <div ng-show="myForm.$invalid">
   2. <ul> <span class="ValidationMessage" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
   3. <li ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</li>
   4. <li ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</li>
   5. </span> <span class="ValidationMessage" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
   6. <li ng-show="myForm.Student.$error.required">Student Name is required.</li>
   7. </span> <span class="ValidationMessage" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
   8. <li ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</li>
   9. <li ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</li>
   10. </span> <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
   11. <li ng-show="myForm.email.$error.required">Email is required.</li>
   12. <li ng-show="myForm.email.$error.email">Invalid email address.</li>
   13. </span> <span class="ValidationMessage" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
   14. <li ng-show="myForm.marks.$error.required">Email is required.</li>
   15. <li ng-show="myForm.marks.$error.number">Invalid number.</li>
   16. <li ng-show="myForm.marks.$error.max">Max Percentage is 100.</li>
   17. </span> </ul>
   18. </div>
3. Now Demo project 4 will be modified inthe below way hence my final code is as below,
   
   1. <form ng-app="myApp" ng-controller="validateCtrl"
   2. name="myForm" novalidate style="width: 470px;margin: 0 auto;border:medium;margin-top:10%" >
   3. <fieldset>
   4. <legend>Validation Demo</legend>
   6. <p>Student Roll Number:<br>
   7. <input type="number" name="StudentRollNumber" ng-model="StudentRollNumber" required>
   8. <img src="~/Content/TickMark.png" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$valid" Class="iconClass" />
   9. <img src="~/Content/Cross.png" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid" Class="iconClass" />
   10. </p>
   13. <p>Student Name:<br>
   14. <input type="text" name="Student" ng-model="Student" required>
   15. <img src="~/Content/TickMark.png" ng-show="myForm.Student.$dirty && myForm.Student.$valid" Class="iconClass" />
   16. <img src="~/Content/Cross.png" ng-show="myForm.Student.$dirty && myForm.Student.$invalid" Class="iconClass" />
   17. </p>
   19. <p>Student Birth Date:<br>
   20. <input type="date" name="BirthDate" ng-model="BirthDate" required placeholder="yyyy-MM-dd">
   21. <img src="~/Content/TickMark.png" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$valid" Class="iconClass" />
   22. <img src="~/Content/Cross.png" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid" Class="iconClass" />
   23. </p>
   27. <p>Student Email:<br>
   28. <input type="email" name="email" ng-model="email" required>
   29. <img src="~/Content/TickMark.png" ng-show="myForm.email.$dirty && myForm.email.$valid" Class="iconClass" />
   30. <img src="~/Content/Cross.png" ng-show="myForm.email.$dirty && myForm.email.$invalid" Class="iconClass" />
   31. </p>
   33. <p>Student Percentage Marks:<br>
   34. <input type="number" name="marks" ng-model="marks" max="100" required>
   35. <img src="~/Content/TickMark.png" ng-show="myForm.marks.$dirty && myForm.marks.$valid" Class="iconClass" />
   36. <img src="~/Content/Cross.png" ng-show="myForm.marks.$dirty && myForm.marks.$invalid" Class="iconClass" />
   37. </p>
   39. <button ng-disabled="myForm.$invalid">Save</button>
   41. <div ng-show="myForm.$invalid">
   42. <ul>
   43. <span class="ValidationMessage" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid" >
   44. <li ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</li>
   45. <li ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</li>
   46. </span>
   48. <span class="ValidationMessage" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
   49. <li ng-show="myForm.Student.$error.required">Student Name is required.</li>
   50. </span>
   52. <span class="ValidationMessage" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid" >
   53. <li ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</li>
   54. <li ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</li>
   55. </span>
   57. <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
   58. <li ng-show="myForm.email.$error.required">Email is required.</li>
   59. <li ng-show="myForm.email.$error.email">Invalid email address.</li>
   60. </span>
   63. <span class="ValidationMessage" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
   64. <li ng-show="myForm.marks.$error.required">Email is required.</li>
   65. <li ng-show="myForm.marks.$error.number">Invalid number.</li>
   66. <li ng-show="myForm.marks.$error.max">Max Percentage is 100.</li>
   67. </span>
   68. </ul>
   70. </div>
   72. </fieldset>
   73. </form>
   75. <script>
   76. var app = angular.module('myApp', []);
   77. app.controller('validateCtrl', function ($scope) {
   78. StudentRollNumber = 12;
   79. BirthDate = new Date(2013, 9, 22);
   80. });
   81. </script>
   83. <style>
   84. input.ng-invalid {
   85. background-color: pink;
   86. }
   87. input.ng-valid {
   88. background-color: lightgreen;
   89. }
   90. form.ng-pristine {
   91. background-color: lightblue;
   92. }
   94. .ValidationMessage {
   95. color:red; font-size:x-small
   96. }
   98. .iconClass {
   99. width:10px;
   100. height:10px
   101. }
   102. </style>
4. Run the project you will find in the application as below,
   
   

Hope you will enjoy displaying validation summary box.