Post
Ask Question

How To Use An AngularJS Form Validation

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. }    
  16.     
  17. .name.ng-dirty.ng-invalid-required {    
  18. background-color: red;    
  19. }    
  20.     
  21. .name.ng-dirty.ng-invalid-minlength {    
  22. background-color: orange;    
  23. }    
  24.     
  25. .degree.ng-valid {    
  26. background-color: lightgreen;    
  27. }    
  28.     
  29. .degree.ng-dirty.ng-invalid-required {    
  30. background-color: red;    
  31. }    
  32.     
  33. degree.ng-dirty.ng-invalid-minlength {    
  34. background-color: orange;    
  35. }    
  36.     
  37. .email.ng-valid {    
  38. background-color: lightgreen;    
  39. }    
  40.     
  41. .email.ng-dirty.ng-invalid-required {    
  42. background-color: red;    
  43. }    
  44.     
  45. .email.ng-dirty.ng-invalid-email {    
  46. background-color: orange;    
  47. }    
  48.     
  49. .Mnumber.ng-valid {    
  50. background-color: lightgreen;    
  51. }    
  52.     
  53. .Mnumber.ng-dirty.ng-invalid-required {    
  54. background-color: red;    
  55. }    
  56.     
  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

 


Similar Articles