Here
in this article I am going to explain how to implement Angularjs form validation
with Bootstarp in MVC application
In the previous article I have explained Sort and filter Grid using AngularJs inMVC, Sort and filter Grid using AngularJs in MVC and How to insert, update,delete and show the data using AngularJs in asp.net MVC.
Description:
I
want to validate the form on submit button. To validate I am using bootstarp with
Angularjs.
Implementation:
Here
I have created an example. Below given is the complete code of View:
Index.cshtml:
@{
ViewBag.Title = "AngualarJs
Tutorial";
}
<style>
.odd {
background-color: antiquewhite;
color: #008b8b;
}
td th {
height: 30px;
min-width: 100px;
}
thead {
background-color: darkgray;
color: white;
height: 30px;
}
.h1, .h2, .h3, h1, h2, h3 {
margin-top: 60px !important;
margin-bottom: 10px;
}
</style>
<h2>AngualarJs Tutorial :
Validation Example</h2>
<div ng-app="mvcapp" ng-controller="DemoController">
<form method="post" name="myform">
<table class="table">
<tr>
<td>Name :</td>
<td>
<input type="text" name="name" maxlength="4" ng-model="empModel.Name" placeholder="Name" class='form-control' required />
<div class="alert
alert-danger"
ng-show="myform.name.$touched
&& myform.name.$invalid">
Enter your name
</div>
</td>
</tr>
<tr>
<td>Phone :</td>
<td>
<input type="number" name="phone" ng-model="empModel.Phone" maxlength="10" placeholder="Phone" class='form-control' required />
<div class="alert
alert-danger"
ng-show="myform.phone.$touched
&& myform.phone.$invalid">
Enter your Phone No.
</div>
</td>
</tr>
<tr>
<td>Salary :</td>
<td>
<input type="number" name="salary" ng-model="empModel.Salary" placeholder="Salary" class='form-control' required />
<div class="alert
alert-danger"
ng-show="myform.salary.$touched
&& myform.salary.$invalid">
Enter your Salary
</div>
</td>
</tr>
<tr>
<td>Department :</td>
<td>
<input type="text" name="department" ng-model="empModel.Department" placeholder="Department" class='form-control' required />
<div class="alert
alert-danger"
ng-show="myform.department.$touched
&& myform.department.$invalid">
Enter your Department
</div>
</td>
</tr>
<tr>
<td>Email :</td>
<td>
<input type="email" name="email" ng-model="empModel.EmailId" class='form-control' placeholder="Email" required />
<div class="alert
alert-danger"
ng-show="myform.email.$touched
&& myform.email.$invalid">
Enter your Email Id
</div>
</td>
</tr>
<tr>
<td>Country :</td>
<td>
<select name="country" ng-model="empModel.Country" required>
<option>India</option>
<option>USA</option>
<option>Russia</option>
<option>Other</option>
</select>
<div class="alert
alert-danger"
ng-show="myform.country.$touched
&& myform.country.$invalid">
Select your Country
</div>
</td>
</tr>
<tr>
<td>I agree to the terms</td>
<td><input type="checkbox" required/></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="submit" id="btnsave" ng-disabled="isDisabledsave" ng-click="myform.$valid
&& saveCustomer()"
/>
<input type="button" value="Update" id="btnupdate" ng-disabled="isDisabledupdate" ng-click="myform.$valid
&& updateCustomer()" />
</td>
</tr>
</table>
</form>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script
src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script>
var angular = angular.module('mvcapp', ['ui.bootstrap']);
angular.controller('DemoController', function ($scope, $http) {
----
});
</script>
Build
and run the project. Test it. Hope this tutorial will help you to apply validation.
How can I download it?
ReplyDeleteProject is not uploaded. You can check the above given information.
Delete