AngularJS Validation In MVC - Part Two

Ajay Gandhi
8y
13.2k
0
1

Article

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,

<script src="~/Scripts/angular.js"></script>

1: Data type validation :

In Html control use type field to specify the type of file.
.$error.{your data type} will help you to disply the message.
1. <p>
2. <input type="number" name="StudentRollNumber" ng-model="StudentRollNumber" required>
3. <span style="color:red" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
4. <span ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</span>
5. <span ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</span>
6. </span>
7. </p>

2: Required filed validation

Put attribute as required in HTML control.
.$error.required helps you to display the required field message.
1. <p>
3. <input type="text" name="Student" ng-model="Student" required>
4. <span style="color:red" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
5. <span ng-show="myForm.Student.$error.required">Student Name is required.</span>
6. </span>
7. </p>

3: Date Validation

Specify the type as date and
Format it will take as systems built-in format
.$error.date helps you to display the required field message
1. <p>
2. Student Birth Date:<br>
3. <input type="date" name="BirthDate" ng-model="BirthDate" required placeholder="yyyy-MM-dd">
4. <span style="color:red" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
5. <span ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</span>
6. <span ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</span>
7. </span>
8. </p>

4: Email Validation

Specify the type as Email and
.$error.email helps you to display the required field message.
1. <input type="email" name="email" ng-model="email" required>
2. <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
3. <span ng-show="myForm.email.$error.required">Email is required.</span>
4. <span ng-show="myForm.email.$error.email">Invalid email address.</span>
6. </span>

5: Range Validation Max and Min

Specify Max or Min attribute
.$error.max or .$error.min helps you to display the error message.
1. <input type="number" name="marks" ng-model="marks" max="100" required>
2. <span style="color:red" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
3. <span ng-show="myForm.marks.$error.required">Email is required.</span>
4. <span ng-show="myForm.marks.$error.number">Invalid number.</span>
5. <span ng-show="myForm.marks.$error.max">Max Percentage is 100.</span>
6. </span>

Your final code is as below,

<script src="~/Scripts/angular.js"></script>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate style="width: 470px;margin: 0 auto;border:medium;margin-top:10%">
<fieldset>
<legend>Validation Demo</legend>
<p>
Student Roll Number:<br>
<input type="number" name="StudentRollNumber" ng-model="StudentRollNumber" required>
<span style="color:red" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
<span ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</span>
<span ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</span>
</span>
</p>
<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 Birth Date:<br>
<input type="date" name="BirthDate" ng-model="BirthDate" required placeholder="yyyy-MM-dd">
<span style="color:red" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
<span ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</span>
<span ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</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>
Student Percentage Marks:<br>
<input type="number" name="marks" ng-model="marks" max="100" required>
<span style="color:red" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
<span ng-show="myForm.marks.$error.required">Email is required.</span>
<span ng-show="myForm.marks.$error.number">Invalid number.</span>
<span ng-show="myForm.marks.$error.max">Max Percentage is 100.</span>
</span>
</p>
<p>
</fieldset>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope) {
StudentRollNumber = 12;
BirthDate = new Date(2013, 9, 22);
});
</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.