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="color: red;" 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

 

  Modified On Nov-30-2017 06:31:00 AM

Leave Comment