AngularJs Form & Validation

In this article, I’m explaining how to use angularjs with html form and how to validate the form using angularjs validation.

 

Example

First create an empty asp.net web application and add a webform to it:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"

Inherits="AngularJsForms.WebForm1" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">

</script>

    <script>

        function formvalidateController($scope) {

           

 

            $scope.submitForm = function (IsValid) {

                if (IsValid) {

                    alert("Registration Form is submitted");

                }

            }

 

        }

    </script>

</head>

<body>

    <div>

        <h2> Regidtration Form</h2>

        <form ng-app="" ng-controller="formvalidateController" name="InputForm" ng-submit="submitForm(InputForm.$valid)" novalidate >

            <p>

                  Name :

               <input type="text" ng-model="name" name="name" required />

                <span style="colorred;" ng-show="InputForm.name.$dirty && InputForm.name.$invalid">

                    <span ng-show="InputForm.name.$error.required">Name is mandatory</span>

                </span>

            </p>

 

            <p>

                Email Id :

               <input type="email" ng-model="email" name="email" required />

                <span style="color:red;" ng-show="InputForm.email.$dirty && InputForm.email.$invalid">

                    <span ng-show="InputForm.email.$error.required">Email Id is mandatory</span>

                    <span ng-show="InputForm.email.$error.email">Invalid email id</span>

                </span>

            </p>

 

            <p>

                Password :

                <input type="password" ng-model="password" name="password" required ng-minlength="3" ng-maxlength="8"/>

                <span style="color:red;" ng-show="InputForm.password.$dirty && InputForm.password.$invalid">

                    <span ng-show="InputForm.password.$error.required">Password is mandatory</span>

                    <span ng-show="InputForm.password.$error.minlength">Minimum password length is 3</span>

                    <span ng-show="InputForm.password.$error.maxlength">Maximum passord length is 8</span>

                </span>

            </p>

 

 

            <p>

                <input type="submit" ng-disabled="InputForm.name.$dirty && InputForm.name.$invalid || InputForm.email.$dirty && InputForm.email.$invalid || InputForm.password.$dirty && InputForm.password.$invalid"/>

            </p>

        </form>

    </div>

 

</body>

</html>

 

Output

Now run the application

 

AngularJs Form & Validation

Now fill the form:

AngularJs Form & Validation

AngularJs Form & Validation

AngularJs Form & Validation

AngularJs Form & Validation

When all the values are correct, click on Submit button:

AngularJs Form & Validation

 

Leave Comment