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="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

Now fill the form:

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

articles

AngularJs Form Validation

Example

Output

Sumit Kesarwani

Leave Comment

2 Comments

Comments

Liked By