Form validation example using AngularJs with Bootstrap in MVC application - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon