AngularJS Validation

AngularJS is an open source script language. AngularJS validation has fast processing compared to other validations. Hence, AngularJS works on the client-side form validation. One of the best features of AngularJS is the form validation.

Validate data

These are some functions, which can be used to track the error.

  • $dirty – It is used by the user to make some changes.
  • $invalid – It is used to identify the value entered is invalid.
  • $error – It is used to exact the error.
  • $Valid- These validations in the form currently evaluates to correct.
Let’s start to our program

Here, I am using Visual Studio 2013 to write an AngularJS program. You can write some other text such as (sublime text, Notepad++,Text….). Thus, many text options are available to write the program.

Step 1: Open Visual Studio, click New=>Project.

1

Step 2: Now, select ASP.NET Web Application. Create a project name. Here, our project name is “FormValidation “ and click OK button.

2

Step 3: Select MVC template and click OK button.

3

Step 4: Here, right click on the project name and add=> HTML page.

4

Step 5: Now, right click on the project name. Click on NuGet packages.

5

Step 6: You need to search AnjularJS in the TextBox. nstall AngularJS.

6

Step 7: In this section , I am using CSS and AngularJS Validation coding.
  1. <!DOCTYPE html>
  2. <html ng-app="myForm"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>AngularJS Validation demo</title>
  6. <style>
  7. body {
  8. font-family: "Calibri";
  9. background-color: #E2E2DC;
  10. }
  11. </style>
  12. <style>
  13. .name.ng-valid {
  14. background-color: lightgreen;
  15. }
  17. .name.ng-dirty.ng-invalid-required {
  18. background-color: red;
  19. }
  21. .name.ng-dirty.ng-invalid-minlength {
  22. background-color: orange;
  23. }
  25. .degree.ng-valid {
  26. background-color: lightgreen;
  27. }
  29. .degree.ng-dirty.ng-invalid-required {
  30. background-color: red;
  31. }
  33. degree.ng-dirty.ng-invalid-minlength {
  34. background-color: orange;
  35. }
  37. .email.ng-valid {
  38. background-color: lightgreen;
  39. }
  41. .email.ng-dirty.ng-invalid-required {
  42. background-color: red;
  43. }
  45. .email.ng-dirty.ng-invalid-email {
  46. background-color: orange;
  47. }
  49. .Mnumber.ng-valid {
  50. background-color: lightgreen;
  51. }
  53. .Mnumber.ng-dirty.ng-invalid-required {
  54. background-color: red;
  55. }
  57. .Mnumber.ng-dirty.ng-invalid-minlength {
  58. background-color: orange;
  59. }
  60. </style>
  61. </head>
  62. <body ng-controller="Mycontroller as Myctrl">
  63. <form ng-submit="Myctrl.submit()" name="MyInfo">
  64. <label>Name:</label>
  65. <input type="text"ng-model="Myctrl.user.name" name="Name" class="name" placeholder="Enter your Name" required ng-minlength="4">
  66. <span ng-show="MyInfo.$dirty && MyInfo.Name.$error.required">Name is Required</span>
  67. <span ng-show="MyInfo.$dirty && MyInfo.Name.$error.minlength">Minimum length Required is 4</span>
  68. <span ng-show="MyInfo.$dirty && MyInfo.Name.invalid">This field is Invalid</span>
  69. <br />
  70. <br />
  71. <label>Degree:</label>
  72. <input type="text" ng-model="Myctrl.user.degree" name="Degree" class="degree" placeholder="Enter your Degree Name" required ng-minlength="2">
  73. <span ng-show="MyInfo.$dirty && MyInfo.Degree.$error.required">Degree is Required</span>
  74. <span ng-show="MyInfo.$dirty && MyInfo.Degree.$error.minlength">Minimum length Required is 2</span>
  75. <span ng-show="MyInfo.$dirty && MyInfo.Degree.invalid">This field is Invalid</span>
  76. <br />
  77. <br />
  78. <label>EmailId:</label>
  79. <input type="email" ng-model="Myctrl.user.email" name="email" class="email" placeholder="Enter your Email" required />
  80. <span ng-show="MyInfo.$dirty && MyInfo.email.$error.required">Email is Required</span>
  81. <span ng-show="MyInfo.$dirty && MyInfo.email.invalid">This field is Invalid</span>
  82. <br />
  83. <br />
  84. <label>Mnumber:</label>
  85. <input type="number" ng-model="Myctrl.user.Mnumber" name="MNumber" class="Mnumber" placeholder="Enter your Mobile Number " required ng-minlength="10">
  86. <span ng-show="MyInfo.$dirty && MyInfo.MNumber.$error.required">Mobile Number is Required</span>
  87. <span ng-show="MyInfo.$dirty && MyInfo.MNumber.$error.minlength">Minimum length Required is 10</span>
  88. <span ng-show="MyInfo.$dirty && MyInfo.MNumber.invalid">This field is Invalid</span>
  89. <br />
  90. <br />
  91. <input type="submit" value="Submit" ng-disabled="MyInfo.$invalid">
  92. </form>
  93. <script src="Scripts/angular.js"></script>
  94. <script>
  95. angular.module('myForm', [])
  96. .controller('Mycontroller', [function () {
  97. var self = this;
  98. self.submit = function () {
  99. console.log('Form is submitted with following user', self.user);
  100. };
  101. }]);
  102. </script>
  103. </body>
  104. </html>
Output: Run the Application and show the output.

output 1

Here, AngularJS validation is working properly.

output 2

Here, you can see the range validation in AngularJS.

output 3

Finally, our output is successfully shown in the figure, given below:

output 4