AngularJS Validation In MVC - Part Two

Ajay Gandhi
8y
27.1k
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>