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,

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

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

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

1. Add Tick mark image and cross image in your content folder,
   
    
   
   
2. Show the tickmark image on validation as below for each control,
   

   <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" />

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.
   

   <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" /> <span class="ValidationMessage" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
   <br />
   <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>
           </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" /> <span class="ValidationMessage" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
   <br />
   <span ng-show="myForm.Student.$error.required">Student Name is required.</span> </span>
           </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" /> <span class="ValidationMessage" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
   <br />
   <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>
           </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" /> <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
   <br />
   <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span> </span>
           </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" /> <span class="ValidationMessage" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
   <br />
   <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>
           </p> <br><br> <button ng-disabled="myForm.$invalid">Save</button>
           <p>
       </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>

5. Run the project; you will find the application as below,
   
   
   

Hope you will enjoy displaying tick mark images on validation.