Empty ASP.Net TextBox Validation on Button Click using AngularJS

Last Reply one year ago By dharmendr

Posted one year ago

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

Asp Textbox validation using angularjs in asp.net button click

Posted one year 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