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

Last Reply 4 days ago By dharmendr

Posted 4 days ago

Hi,

I have Orders and Items 

I am going to do validations for that

I need to display validation message if i haven't enter any values on required fiedls in the same way we have to enter altelat one row in Items or else i need to display validation message on Items like below

Please enter alteast one row...!

the form should be valid after enetering one row then i need to display form is valid 

Could you please check my code and help me

@{
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="~/scripts/dirpagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
        app.controller('MyController', function ($scope, $http, $window) {
            debugger;
            $scope.invoice = false;
            $scope.hide = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.invoice = $scope.invoice ? false : true;
            }
            $scope.Customers = [];
            $scope.Add = function () {
                    //Add the new item to the Array.
                    var customer = {};
                    customer.Name = $scope.Name;
                    customer.Name1 = $scope.Name1;
                    $scope.Customers.push(customer);
                    //Clear the TextBoxes.
                    $scope.Name = "";
                    $scope.Name1 = "";               
            };

            $scope.Save = function (isValid) {
                if (isValid) {
                    $scope.mahesh = false;
                    alert("Form is valid");
                    $scope.userForm.$setPristine();
                }
                else {
                    $scope.mahesh = true;
                    // Show error Message if Form not valid.
                    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>

            </form>
            <form name="userForm1" novalidate>
                <table 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>
                    </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>

 

Posted 4 days ago Modified on 3 days ago

Hi mahesh213,

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

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 () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.invoice = $scope.invoice ? false : true;
            }
            $scope.Customers = []; //{ Id: 1, Name: 'Test 11', Name1: 'Test 12' }, { Id: 2, Name: 'Test 21', Name1: 'Test 22'}
            $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) {
                if ($('#tblCustomers tbody tr').length < 2) {
                    $('#trRow').attr("style", "display: block;");
                }
                else {
                    $('#trRow').attr("style", "display: none;");
                }
                if (isValid) {

                    $scope.mahesh = false;
                    alert("Form is valid");
                    $scope.userForm.$setPristine();
                }
                else {
                    $scope.mahesh = true;
                    // Show error Message if Form not valid.
                    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