Saturday, August 20, 2016

Form validation example using AngularJs with Bootstrap in MVC application

Here in this article I am going to explain how to implement Angularjs form validation with Bootstarp in MVC application

Form validation example using AngularJs with Bootstrap in MVC application


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.


2 comments: