AngularJS Validation In MVC - Part One

Ajay Gandhi
8y
8.1k
0
2

Article

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.

State	When the state is changed
$untouched	True : If field changes the state changes
$touched	True : The field has been touched
$pristine	True: If the field has not been modified yet False: If the field has been modified
$dirty	True : The field has been modified False : The field has been not modified
$invalid	True : The field content is In-valid False : The field content is valid
$valid	True : 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,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/angular.js"></script>
@RenderSection("scripts", required: false)
</head>
<body>
@RenderBody()
</body>
</html>

Add below code in student page,

<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate style="width: 370px;margin: 0 auto;border:medium;margin-top:10%" >
<fieldset>
<legend>Validation Demo</legend>
<p>Student Name:<br>
<input type="text" name="Student" ng-model="Student" required>
<span style="color:red" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
<span ng-show="myForm.Student.$error.required">Student Name is required.</span>
</span>
</p>
<p>Student Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
</fieldset>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope) {
});
</script>

Step 5: Run the application you will find the validation message working as below,

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