Page was loaded after validate the form ng-click function not working

Question

I am new to angularjs. I am validating the form on triggering the save function.

I placed my control inside the form and named it myform .

I am using ng-required="true" in Name and Password textboxes.

In the ng-click of the Save button, I call the save() function

<div ng-app="myApp" ng-controller="myControl">
    <form name="myForm" novalidate>
    <table>
        <tr>
            <td>
                Name
            </td>
            <td>
                <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name"
                    ng-model="Name" ng-required="true">
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                <input type="password" class="form-control" id="txtPassword" placeholder="Password"
                    ng-required="true" name="Password" ng-model="Password">
            </td>
        </tr>
        <tr>
            <td>
                Email
            </td>
            <td>
                <input type="email" class="form-control" id="Email" placeholder="Email" name="Email"
                    ng-model="Email">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <button ng-click="save()"> Save </button>
            </td>
        </tr>
    </table>
    </form>
  </div>

In the save() function, I validate the form and place an alert saying if the form is valid or invalid.

<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myControl", function ($scope, $http) {
        $scope.save = function () {
            if ($scope.myForm.$valid) {
                alert('Valid');
            } else {
                alert('Invalid');
            }
        };
    });
</script>

Now it will trigger validation message

After entering name and password and submitting the form, the page loaded, but didn't trigger an alert message.

Answer 1

I'm going to assume that it's trying to call the form's action, which is nothing so it will reload the page. You can use ng-submit which will prevent the default action.

 var app = angular.module("myApp", []); app.controller("myControl", function($scope, $http) { $scope.save = function() { if ($scope.myForm.$valid) { alert('Valid'); } else { alert('Invalid'); } }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myControl"> <form name="myForm" novalidate ng-submit="save()"> <table> <tr> <td> Name </td> <td> <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true"> </td> </tr> <tr> <td> Password </td> <td> <input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password"> </td> </tr> <tr> <td> Email </td> <td> <input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email"> </td> </tr> <tr> <td colspan="2" align="right"> <button type="submit"> Save </button> </td> </tr> </table> </form> </div> 

Or if you really want to keep ng-click you can pass the event in the save method and prevent it there

 var app = angular.module("myApp", []); app.controller("myControl", function($scope, $http) { $scope.save = function(e) { e.preventDefault() if ($scope.myForm.$valid) { alert('Valid'); } else { alert('Invalid'); } }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myControl"> <form name="myForm" novalidate> <table> <tr> <td> Name </td> <td> <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true"> </td> </tr> <tr> <td> Password </td> <td> <input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password"> </td> </tr> <tr> <td> Email </td> <td> <input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email"> </td> </tr> <tr> <td colspan="2" align="right"> <button type="submit" ng-click="save($event)"> Save </button> </td> </tr> </table> </form> </div> 

Answer 2

Here is what you should do

<form ng-submit="myForm.$valid && save()" name="myForm">
    <button type="submit">Submit</button>
</form>

This simple snippet ng-submit="myForm.$valid && save()" will not call save if form is not valid. And this is the angular way - keep all the validation apart from business logic. save method should be executed only if all the form data is valid.

There are a lot of base input validation directives: minlength, maxlength, required, pattern and etc. . AngularJS has a great mechanism that allows you to create your own validation ( Here is a great article of how to implement custom validation for inputs, just in case).