Form validation in Asp.Net MVC with AngularJs

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; }     } }

Add a Empty Home Controller .

?

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();         }     } }

Add Index view corresponding to Index action.

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>

Above I have used AngularJs directives for form validation .

• 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.

There are many form validation directives in AngularJs.

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", []);

Controller.js

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");         }     } });

Modilfy your _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>

We have Done the form validation in AngularJs .

Demo

DOWNLOAD