Validate Form on Button Click using AngularJS in ASP.Net MVC

Last Reply 6 months ago By dharmendr

Posted 6 months ago

Hi,

Display Form Validation error message on Button Click using AngularJS in ASP.Net MVC

If we can look at into my forum without entering of even single row it was dsiplaying alert message form is valid

i don't need

my requiremnt is if everything is valid on orders and Items(at least we have enter single row) until then no need to display alert message form is valid

Could you please check it and help me

Posted 6 months ago

Hi mahesh213,

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

You need to check another condition in the if statement that if the table row length greater than or equals to 2 then only the condition executed.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }
}

View

<html>
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.invoice = false;
            $scope.hide = false;
            $scope.ShowHide = function () {
                $scope.invoice = $scope.invoice ? false : true;
            }
            $scope.Customers = [];
            $scope.Add = function () {
                //Add the new item to the Array.
                if ($scope.Name != undefined || $scope.Name1 != undefined) {
                    var customer = {};
                    customer.Name = $scope.Name;
                    customer.Name1 = $scope.Name1;
                    $scope.Customers.push(customer);
                    //Clear the TextBoxes.
                    $scope.Name = "";
                    $scope.Name1 = "";
                    $('#trRow').attr("style", "display: none;");
                }
            };

            $scope.Save = function (isValid) {
                var rowCount = $('#tblCustomers tbody tr').length;
                if (rowCount < 2) {
                    $('#trRow').attr("style", "display: block;");
                }
                else {
                    $('#trRow').attr("style", "display: none;");
                }
                if (isValid && rowCount >= 2) {
                    $scope.mahesh = false;
                    alert("Form is valid");
                    $scope.userForm.$setPristine();
                }
                else {
                    $scope.mahesh = true;
                    if ($scope.userForm.$error.required != undefined) {
                        for (var i = 0; i < $scope.userForm.$error.required.length; i++) {
                            $scope.userForm.$error.required[i].$pristine = false;
                        }
                    }
                }
            }
        }); 
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-show="invoice">
            <form name="userForm" novalidate>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <table class="table table-condensed">
                            <tr class="active">
                                <td>Order Name</td>
                                <td ng-class="{ 'has-error' : userForm.OrderName.$invalid && !userForm.OrderName.$pristine }">
                                    <input type="text" class="form-control" name="OrderName" ng-model="OrderName" required />
                                    <p style="color: red" ng-show="userForm.OrderName.$error.required && !userForm.OrderName.$pristine"
                                        class="help-block">Order Name is required.</p>
                                </td>
                                <td>Order Date</td>
                                <td><input type="text" class="form-control" name="date" ng-model="OrderDate" /></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <table id="tblCustomers" cellpadding="0" cellspacing="0">
                <tr>
                    <th>Name</th>
                    <th>Name1</th>
                    <th>&nbsp;</th>
                </tr>
                <tbody ng-repeat="m in Customers">
                    <tr>
                        <td ng-show="hide">{{m.Id}}</td>
                        <td>{{m.Name}}</td>
                        <td>{{m.Name1}}</td>
                        <td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td><input type="text" name="Name" ng-model="Name" /></td>
                        <td><input type="text" ng-model="Name1" name="Name1" /></td>
                        <td><input type="button" ng-click="Add()" value="Add" /></td>
                    </tr>
                    <tr id="trRow" style="display: none;">
                        <td colspan="3">
                            <p style="color: red" class="help-block">Please enter alteast one row...!</p>
                        </td>
                    </tr>
                </tfoot>
            </table>
            <div style="padding: 10px 0;">
                <input id="submit" type="button" value="Save" name="add" ng-click="Save(userForm.$valid)"
                    class="btn btn-success" />
            </div>
            </form>
        </div>
        <button class="btn btn-success btn-sm " ng-click="ShowHide();" style="margin-left: 15px;">Add Order</button>
    </div>
</body>
</html>

Screenshot