How to validate a form in AngularJs?

A form contains the collection of controls like input text-box, number text, email text and checkbox etc.

When we submit to form that time we need to validate first and then submit to it. If input is not passed validations. It will return an errors message automatically to the user.

The example as given below

 var app = angular.module('formApp', []);
 app.controller('formCtrl', function ($scope) {

   $scope.sendForm = function () {
        alert('Form Is submited');
    };

    $scope.getClass = function (color) {
        return color.toString();
     }
  });

The HTML code-sample

<div ng-app="formApp" ng-controller="formCtrl">
    <h3>Form validation demo app in AngularJs</h3>
    <form name="personForm" ng-submit="sendForm()">
        <div>
            <label for="name">Name</label>
            <input id="name" name="name" type="text" ng-model="person.name" required />
            <span class="error" ng-show="personForm.name.$error.required">Required!</span>
        </div>
        <div class="space"></div>
        <div>
            <label for="adress">Adress</label>
            <input id="address" name="address" type="text" ng-model="person.address" required />
            <span class="error" ng-show="personForm.address.$error.required">Required!</span>
        </div>
        <div class="space"></div>
        <div>
            <label for="contact">Contact No</label>
            <input id="mobile" name="mobile" type="number" ng-model="person.mobile" required />
            <span class="error" ng-show="personForm.mobile.$error.required">Required with number!</span>
            <span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span>
        </div>
        <div class="space"></div>
        <div>
            <label for="email">Email</label>
            <input id="email" name="email" type="email" ng-model="person.email" required />
            <span class="error" ng-show="personForm.email.$error.required">Required!</span>
            <span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span>
        </div>
        <div class="space"></div>
        <div>
            <input type="checkbox" ng-model="terms" name="terms" id="terms" required />
            <label for="terms">I Agree to the terms.</label>
            <span class="error" ng-show="personForm.terms.$error.required">You must agree to the terms</span>
        </div>
        <div class="space"></div>
        <div>
            <button type="submit">Submit Form</button>
        </div>
    </form>
</div>

The CSS code-sample

      <style>
        .valid.false {
            background: red;
        }

        .valid.true {
            background: green;
        }

        .error {
            color: red;
        }
    </style>

The Full Live demo code-sample

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .valid.false {
            background: red;
        }

        .valid.true {
            background: green;
        }

        .error {
            color: red;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script>
        var app = angular.module('formApp', []);
        app.controller('formCtrl', function ($scope) {

            $scope.sendForm = function () {
                alert('Form Is submited');
            };

            $scope.getClass = function (color) {
                return color.toString();
            }
        });
    </script>
</head>
<body ng-app="formApp" ng-controller="formCtrl">
    <h3>Form validation demo app in AngularJs</h3>
    <form name="personForm" ng-submit="sendForm()">
        <div>
            <label for="name">Name</label>
            <input id="name" name="name" type="text" ng-model="person.name" required />
            <span class="error" ng-show="personForm.name.$error.required">Required!</span>
        </div>
        <div class="space"></div>
        <div>
            <label for="adress">Adress</label>
            <input id="address" name="address" type="text" ng-model="person.address" required />
            <span class="error" ng-show="personForm.address.$error.required">Required!</span>
        </div>
        <div class="space"></div>
        <div>
            <label for="contact">Contact No</label>
            <input id="mobile" name="mobile" type="number" ng-model="person.mobile" required />
            <span class="error" ng-show="personForm.mobile.$error.required">Required with number!</span>
            <span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span>
        </div>
        <div class="space"></div>
        <div>
            <label for="email">Email</label>
            <input id="email" name="email" type="email" ng-model="person.email" required />
            <span class="error" ng-show="personForm.email.$error.required">Required!</span>
            <span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span>
        </div>
        <div class="space"></div>
        <div>
            <input type="checkbox" ng-model="terms" name="terms" id="terms" required />
            <label for="terms">I Agree to the terms.</label>
            <span class="error" ng-show="personForm.terms.$error.required">You must agree to the terms</span>
        </div>
        <div class="space"></div>
        <div>
            <button type="submit">Submit Form</button>
        </div>
    </form>
</body>
</html>

The output

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz