Post
Ask Question

AngularJS Validation In MVC - Part One

This is the beginning of the series which will help you learn how to implement validation in MVC page. I will try to cover step by step each corner of validation in AngularJS and at the end of last part you will understnad how validation in MVC can be implemented using AngularJS. Although MVC has its own validation framework which is even simpler than AngularJS, I am discussing the additional way which you can implement it. So before starting let me clear up some of the following states to the for each input field.

This states are as below. 

StateWhen the state is changed
$untouched True : If field changes the state changes
$touchedTrue : The field has been touched
$pristineTrue: If the field has not been modified yet

False: If the field has been modified
$dirtyTrue : The field has been modified

False : The field has been not modified
$invalidTrue : The field content is In-valid

False : The field content is valid
$validTrue : The field content is valid

False : The field content is In-valid

Step 1: Create MVC application,

Create

Step 2 : Add AngularJS package as below,

Add

You may refer below link for step 2.

Step 3: Create Student Controller and Student Page,

Create

Step 4: Modify layout page and student as follows,

Add AngularJS reference

code

My Layout page as below,

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>@ViewBag.Title</title>  
  7.     @Styles.Render("~/Content/css")  
  8.     @Scripts.Render("~/bundles/modernizr")  
  9.     @Scripts.Render("~/bundles/jquery")  
  10.     <script src="~/Scripts/angular.js"></script>  
  11.     @RenderSection("scripts", required: false)  
  12. </head>  
  13. <body>  
  14.     @RenderBody()  
  15.   
  16.       
  17. </body>  
  18. </html>  
Add below code in student page,
  1. <form ng-app="myApp" ng-controller="validateCtrl"   
  2. name="myForm" novalidate  style="width: 370px;margin: 0 auto;border:medium;margin-top:10%"  >  
  3.     <fieldset>  
  4.         <legend>Validation Demo</legend>  
  5. <p>Student Name:<br>  
  6. <input type="text" name="Student" ng-model="Student" required>  
  7. <span style="color:red" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">  
  8. <span ng-show="myForm.Student.$error.required">Student Name is required.</span>  
  9. </span>  
  10. </p>  
  11.   
  12. <p>Student Email:<br>  
  13. <input type="email" name="email" ng-model="email" required>  
  14. <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">  
  15. <span ng-show="myForm.email.$error.required">Email is required.</span>  
  16. <span ng-show="myForm.email.$error.email">Invalid email address.</span>  
  17. </span>  
  18. </p>  
  19.   
  20. <p>  
  21.  </fieldset>  
  22. </form>  
  23.   
  24.     <script>  
  25.         var app = angular.module('myApp', []);  
  26.         app.controller('validateCtrl', function ($scope) {  
  27.          
  28.         });  
  29. </script>  
Step 5: Run the application you will find the validation message working as below,

application

In this session we learned the basic section on validation. In the next section we will learn more details about validation.
 
Read more articles on AngularJS:


Similar Articles