AngularJS Validation In MVC - Part Five

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

This part will teach you how to,
  1. How to display validation summary using AngularJS
Initial requirement is reference, 
  1. <script src="~/Scripts/angular.js"></script>  
  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>  
    5.   
    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>  
    11.           
    12.   
    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>  
    18.   
    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>  
    24.   
    25.   
    26.   
    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>  
    32.   
    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>  
    38.   
    39.  <button ng-disabled="myForm.$invalid">Save</button>  
    40.   
    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>  
    47.   
    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>  
    51.   
    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>  
    56.   
    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>  
    61.   
    62.   
    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>  
    69.   
    70. </div>  
    71.   
    72.  </fieldset>  
    73. </form>  
    74.   
    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>  
    82.   
    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. }  
    93.   
    94.     .ValidationMessage {  
    95.         color:red; font-size:x-small  
    96.     }  
    97.   
    98.     .iconClass {  
    99.         width:10px;  
    100.         height:10px  
    101.     }  
    102. </style>    
  4. Run the project you will find in the application as below,
    output

Hope you will enjoy displaying validation summary box.


Similar Articles