Before starting the second part I recommend that you please go through the first part.

AngularJS Validation In MVC - Part One
This part will teach you how to validate the Number, Email address, Min / Max validation of number. This is all the types of validation you are going to learn here .

Initial requirement is reference,
  1. <script src="~/Scripts/angular.js"></script>
1: Data type validation :

2: Required filed validation

3: Date Validation

4: Email Validation

5: Range Validation Max and Min

Your final code is as below,

  1. <script src="~/Scripts/angular.js"></script>
  2. <form ng-app="myApp" ng-controller="validateCtrl"
  3. name="myForm" novalidate style="width: 470px;margin: 0 auto;border:medium;margin-top:10%">
  4. <fieldset>
  5. <legend>Validation Demo</legend>
  7. <p>
  8. Student Roll Number:<br>
  9. <input type="number" name="StudentRollNumber" ng-model="StudentRollNumber" required>
  10. <span style="color:red" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
  11. <span ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</span>
  12. <span ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</span>
  13. </span>
  14. </p>
  17. <p>
  18. Student Name:<br>
  19. <input type="text" name="Student" ng-model="Student" required>
  20. <span style="color:red" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
  21. <span ng-show="myForm.Student.$error.required">Student Name is required.</span>
  22. </span>
  23. </p>
  25. <p>
  26. Student Birth Date:<br>
  27. <input type="date" name="BirthDate" ng-model="BirthDate" required placeholder="yyyy-MM-dd">
  28. <span style="color:red" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
  29. <span ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</span>
  30. <span ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</span>
  31. </span>
  32. </p>
  36. <p>
  37. Student Email:<br>
  38. <input type="email" name="email" ng-model="email" required>
  39. <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  40. <span ng-show="myForm.email.$error.required">Email is required.</span>
  41. <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  42. </span>
  43. </p>
  47. <p>
  48. Student Percentage Marks:<br>
  49. <input type="number" name="marks" ng-model="marks" max="100" required>
  50. <span style="color:red" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
  51. <span ng-show="myForm.marks.$error.required">Email is required.</span>
  52. <span ng-show="myForm.marks.$error.number">Invalid number.</span>
  53. <span ng-show="myForm.marks.$error.max">Max Percentage is 100.</span>
  54. </span>
  55. </p>
  59. <p>
  60. </fieldset>
  61. </form>
  63. <script>
  64. var app = angular.module('myApp', []);
  65. app.controller('validateCtrl', function ($scope) {
  66. StudentRollNumber = 12;
  67. BirthDate = new Date(2013, 9, 22);
  68. });
  69. </script>
Run your application you will find the error message working as below,
output
So in this way you will perform the validation using Angular JS in MVC although MVC has its own beautiful validation framework.
Read more articles on AngularJS: