Empty ASP.Net TextBox Validation on Button Click using AngularJS

Last Reply 7 months ago By dharmendr

Posted 7 months ago

How to make button click validation using angular js in asp.net?

Asp Textbox validation using angularjs in asp.net button click

Posted 7 months ago

Hi SUJAYS,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller("MyController", function ($scope, $window) {
            $scope.Save = function (isValid, e) {
                if (isValid) {
                    $window.alert("Valid");
                } else {
                    // Show error Message if Form not valid.
                    if ($scope.MyForm.$error.required != undefined) {
                        for (var i = 0; i < $scope.MyForm.$error.required.length; i++) {
                            $scope.MyForm.$error.required[i].$pristine = false;
                        }
                    }
                    e.preventDefault();
                }
            }
        });      
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <form id="form1" runat="server" novalidate>
    <div name="MyForm" ng-form novalidate>
        <table>
            <tr>
                <td><asp:Label ID="Label5" runat="server" Text="EmpCode"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtempcode" runat="server" ng-model="Code" required></asp:TextBox>
                    <span ng-show="MyForm.txtempcode.$error.required && !MyForm.txtempcode.$pristine"
                        style="color: Red;">Employee code required!</span>
                </td>
            </tr>
            <tr>
                <td><asp:Label ID="Label6" runat="server" Text="Name"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtempname" runat="server" ng-model="Name" required></asp:TextBox>
                    <span ng-show="MyForm.txtempname.$error.required && !MyForm.txtempname.$pristine"
                        style="color: Red;">Employee name required!</span>
                </td>
            </tr>
            <tr>
                <td><asp:Label ID="Label7" runat="server" Text="Date Of Birth"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtdob" runat="server" ng-model="DOB" required></asp:TextBox>
                    <span ng-show="MyForm.txtdob.$error.required && !MyForm.txtdob.$pristine" style="color: Red;">
                        Dato of Birth required!</span>
                </td>
            </tr>
            <tr>
                <td><asp:Label ID="Label8" runat="server" Text="Address"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtaddress" runat="server" ng-model="Address" required></asp:TextBox>
                    <span ng-show="MyForm.txtaddress.$error.required && !MyForm.txtaddress.$pristine"
                        style="color: Red;">Address required!</span>
                </td>
            </tr>
            <tr>
                <td><asp:Label ID="Label9" runat="server" Text="Email"></asp:Label></td>
                <td>
                    <asp:TextBox ID="txtemail" runat="server" ng-model="Email" required ng-pattern="/^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/"></asp:TextBox>
                    <span ng-show="MyForm.txtemail.$error.required && !MyForm.txtemail.$pristine" style="color: Red;">
                        Email required!</span> <span ng-show="MyForm.txtemail.$error.pattern" style="color: Red;">
                            Invalid Email Address</span>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><asp:Button ID="Button1" runat="server" Text="Save" ng-click="Save(MyForm.$valid,$event)" /></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Screenshot