AngularJS Validation In MVC - Part Four

Before starting the second part I will recommend that you please go through the below parts on AngularJS Validation,

This part will teach you how to,
  1. How to display tick mark image or cross image on validation success
  2. How to display cross image on validation failure

Initial requirement is reference

  1. <script src="~/Scripts/angular.js"></script>   
  1. Add Tick mark image and cross image in your content folder,

    mark tick

  2. Show the tickmark image on validation as below for each control,
    1. <img src="~/Content/TickMark.png" ng-show="myForm.Student.$dirty && myForm.Student.$valid" Class="iconClass" />  
    2.   
    3. <img src="~/Content/Cross.png" ng-show="myForm.Student.$dirty && myForm.Student.$invalid" Class="iconClass" />  
  3. Repeat the step for all the validation control in your project.

  4. Now Demo project 3 will modified in below way hence my final code is as below.
    1. <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate style="width: 470px;margin: 0 auto;border:medium;margin-top:10%">  
    2.     <fieldset>  
    3.         <legend>Validation Demo</legend>  
    4.         <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" /> <span class="ValidationMessage" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">  
    5. <br />  
    6. <span ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</span> <span ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</span> </span>  
    7.         </p>  
    8.         <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" /> <span class="ValidationMessage" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">  
    9. <br />  
    10. <span ng-show="myForm.Student.$error.required">Student Name is required.</span> </span>  
    11.         </p>  
    12.         <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" /> <span class="ValidationMessage" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">  
    13. <br />  
    14. <span ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</span> <span ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</span> </span>  
    15.         </p>  
    16.         <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" /> <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">  
    17. <br />  
    18. <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span>  
    19.         </p>  
    20.         <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" /> <span class="ValidationMessage" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">  
    21. <br />  
    22. <span ng-show="myForm.marks.$error.required">Email is required.</span> <span ng-show="myForm.marks.$error.number">Invalid number.</span> <span ng-show="myForm.marks.$error.max">Max Percentage is 100.</span> </span>  
    23.         </p> <br><br> <button ng-disabled="myForm.$invalid">Save</button>  
    24.         <p>  
    25.     </fieldset>  
    26. </form>  
    27. <script>  
    28.     var app = angular.module('myApp', []);  
    29.     app.controller('validateCtrl', function($scope)  
    30.     {  
    31.         StudentRollNumber = 12;  
    32.         BirthDate = new Date(2013, 9, 22);  
    33.     });  
    34. </script>  
    35. <style>  
    36.     input.ng-invalid   
    37.     {  
    38.         background-color: pink;  
    39.     }  
    40.       
    41.     input.ng-valid   
    42.     {  
    43.         background-color: lightgreen;  
    44.     }  
    45.       
    46.     form.ng-pristine  
    47.     {  
    48.         background-color: lightblue;  
    49.     }  
    50.       
    51.     .ValidationMessage  
    52.     {  
    53.         color: red;  
    54.         font-size: x-small  
    55.     }  
    56.       
    57.     .iconClass   
    58.     {  
    59.         width: 10px;  
    60.         height: 10px  
    61.     }  
    62. </style>  
  5. Run the project; you will find the application as below,

    output

Hope you will enjoy displaying tick mark images on validation.

Up Next
    Ebook Download
    View all
    Learn
    View all