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,
- How to display tick mark image or cross image on validation success
- How to display cross image on validation failure
Initial requirement is reference
- <script src="~/Scripts/angular.js"></script>
- Add Tick mark image and cross image in your content folder,
- 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" />
- Repeat the step for all the validation control in your project.
- 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>
- Run the project; you will find the application as below,
Hope you will enjoy displaying tick mark images on validation.