In this tutorial, we will form validation in angularJs.
In most of Web Application, We require user to register on our application.
In this way, We need do some action like Form validation , so that user can’t submit a Invalid form.
There are too many way to validate a form in Client side.
Here We are using AngularJs for the form validation.
AngularJs Provide many form Validation Directives, We will use then to validate our form.
Let’s create a mvc application.
Add a Employee class.
01
02
03
04
05
06
07
08
09
10
11
| namespace FormValidationInAj.Models{ public class Employee { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Email { get; set; } public int Age { get; set; } }} |
01
02
03
04
05
06
07
08
09
10
11
12
| using System.Web.Mvc;namespace FormValidationInAj.Controllers{ public class HomeController : Controller { public ActionResult Index() { return View(); } }} |
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| @model FormValidationInAj.Models.Employee<div ng-controller="myCntrl" class="divForm"> <form name="registerForm" novalidate ng-submit="Save(registerForm.$valid)"> @Html.AntiForgeryToken() <fieldset> <legend>Employee</legend> <div class="editor-label"> @Html.LabelFor(model => model.FirstName) </div> <div class="editor-field form-group"> <input type="text" ng-model="firstName" name="firstName" ng-required="true" /> <p ng-show="registerForm.firstName.$error.required && !registerForm.firstName.$pristine" class=" error">First Name Required</p> </div> <div class="editor-label"> @Html.LabelFor(model => model.LastName) </div> <div class="editor-field form-group"> <input type="text" ng-model="lastName" name="lastName" /> </div> <div class="editor-label"> @Html.LabelFor(model => model.Email) </div> <div class="editor-field form-group"> <input type="email" ng-model="Email" name="Email" ng-required="true" /> <p ng-show="registerForm.Email.$error.required && !registerForm.Email.$pristine" class="error">Email Required</p> <p ng-show="registerForm.Email.$error.email && !registerForm.Email.$pristine" class="error">Invalid Email</p> </div> <div class="editor-label"> @Html.LabelFor(model => model.Age) </div> <div class="editor-field form-group"> <input type="number" ng-model="Age" name="Age" ng-required="true" /> <p ng-show="registerForm.Age.$error.required && !registerForm.Age.$pristine" class="error">Age Required</p> <p ng-show="registerForm.Age.$error.number && !registerForm.Age.$pristine" class="error">Invalid Age </p> </div> <p> <input type="submit" value="Create" class="btn btn-primary" /> </p> </fieldset> </form></div> |
-
Required :using
ng-required="true", Validated a input field that is required. -
Email : using
Type="email"property of input field, validate Email address. -
Number : using
Type="number"property of input field, validate number field.
To show the error message, I have used Error Name of AngularJs.
To show error message only when used has been interacted with form, unless Error message will be hidden, I have used
$pristine .$pristine : It will be true If user has not interacted with form yet.
Add two new Js file .
module.js
1
| var app = angular.module("myApp", []); |
01
02
03
04
05
06
07
08
09
10
| app.controller("myCntrl", function ($scope, $http) { $scope.Save = function (Valid) { if (!Valid) { alert("Invalid form"); return; } else { alert("It's Great. Form Submitted"); } }}); |
_Layout.cshtml file.I have included required Js file for angularJs.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html><html ng-app="myApp"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/Angular/Module.js"></script> <script src="~/Scripts/Angular/Controller.js"></script> <style> .divForm{ margin: 15px 50px; padding: 0; width: 30%; } </style></head><body> @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)</body></html> |
Demo
DOWNLOAD
