AngularJS Validation In MVC - Part Six

Before starting the sixth part I will recommend you to 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
• AngularJS Validation In MVC - Part Five

This part will teach you how to,

1. How to call custom validation in angular JS

Custom validation usually required when you want to call external functionality from your code and validate the control. For example you might need to do database validation for verifying the user name. For this you need following things to be done.

Initial requirement is reference

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

1. Add directive in your angular js function. This function will verify is your control value is from specific string names. You may modify by giving service call.
   

   app.directive('myDirective', function()
   {
       return
       {
           require: 'ngModel',
           link: function(scope, element, attr, mCtrl)
           {
               function myValidation(value)
               {
                   var myarr = ["India", "ind", "india", "Ind"];
                   if (myarr.indexOf(value) > -1)
                   {
                       mCtrl.$setValidity('charE', true);
                   } else
                   {
                       mCtrl.$setValidity('charE', false);
                   }
                   return value;
               }
               mCtrl.$parsers.push(myValidation);
           }
       };
   });

2. Refer your directive in the control to be validate as below way,
   

   <input name="Country" ng-model="Country" required my-directive>

3. Give Proper message where you want to give validation message,
   

   <li ng-show="myForm.Country.$invalid">Country should be India/Ind.</li>

4. Run the program and you will find then validation working as below
   
   
   
   
   Hope you will enjoy displaying validation summary box.