Validation with Bootstrap in AngularJs


We can make very interactive UI validation with help of Bootstrap in AngularJs Framework. Here I will show one simple validation example with bootstrap in angularJs.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <script src="../Scripts/angular.js"></script>
    <link href="../Style/bootstrap.css" rel="stylesheet" />
        var app = angular.module("MyApp", []);
        app.controller("User", function ($scope) {
            $scope.error = function (name) {
                var s = $scope.form[name];
                return s.$invalid && s.$dirty ? "error" : "";
<body ng-app="MyApp">
    <div ng-controller="User">
        <br />
        <form name="form" ng-submit="submit()" class="form-horizontal">
            <div class="control-group" ng-class="error('FirstName')">
                <label class="control-label" for="FirstName">FirstName</label>
                <div class="controls">
                    <input id="FirstName" name="FirstName" type="text"
                           ng-model="User.FirstName" placeholder="FirstName" required />
                    <span class="help-block" ng-show="form.FirstName.$invalid && form.FirstName.$dirty">
                      First Name is required.

            <div class="control-group" ng-class="error('LastName')">
                <label class="control-label" for="LastName">LastName</label>
                <div class="controls">
                    <input id="LastName" name="LastName" type="text"
                           ng-model="User.LastName" placeholder="LastName" required />
                    <span class="help-block" ng-show="form.LastName.$invalid && form.LastName.$dirty">
                        Last Name is required.
            <div class="control-group" ng-class="error('Address')">
                <label class="control-label" for="Address">Address</label>
                <div class="controls">
                    <input id="Address" name="Address" type="text"
                           ng-model="User.Address" placeholder="Address" required />
                    <span class="help-block" ng-show="form.Address.$invalid && form.Address.$dirty">
                        Address is required.
            <div class="control-group">
                <div class="controls">
                    <button ng-disabled="form.$invalid" class="btn">Submit</button>



In this post we learnt that how to do validation with Bootstrap in angularJs


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.