How to show errors on submit in AngularJS and stop form from submitting without disabling the submit button?

Question

i want to validate my form with having errors for submitting empty fields what should i do in my controller?

<form id="login-form" name="LoginForm" action="/home" method="get" class="loginform" role="form" novalidate ng-submit="LoginValidator()">

    <input type="email" name="Email" id="email" tabindex="1"
           ng-model="login.email"
           ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/"
           placeholder="Email" ng-required="true">
    <span style="color:red; display:block; text-align:center;"
          ng-show="LoginForm.Email.$dirty && LoginForm.Email.$error.pattern">
     * Please Enter Valid Email</span>
    <span style="color:red; display:block; text-align:center;"
          ng-show="LoginForm.Email.$submitted && LoginForm.Email.$error.required">
     * Email required</span>

    <input type="password" name="password" ng-minlength="8" id="password"
           tabindex="2" ng-model="login.password"
           placeholder="Password" ng-required="true">
    <div ng-show="LoginForm.password.$dirty && LoginForm.password.$invalid">
      <small style="color:red; display:block; text-align:center;">
        * Invalid Password</small>
    </div>
    <input type="submit" value="LOG IN" />

</form>

it shows the first error but not showing error of $submitted

why should i do here?

var app = angular.module('qec', []);
app.controller('login' ,['$scope' , function ($scope) {
    $scope.LoginValidator = function (isValid) {
    };
}]);

Try using * Email required and ng-submit="LoginForm.$valid&&LoginValidator()" — Vivz, Aug 23 '17 at 05:58
To stop automatic submit, remove the `action` attribute from the `
` element. And use the `ng-submit` directive. — georgeawg, Aug 23 '17 at 06:08
Remove `action="/home"` from form attribute to stop page submit or if you actually want to submit the page after validation use `$event.preventDefault();` in script. Read more here - http://blog.abhishekg.com/2017/08/angularjs-stop-page-refresh-on-form-submission-after-click-on-button/ — abhig10, Aug 23 '17 at 06:23

score 0 · Accepted Answer · edited Aug 23 '17 at 11:24

0

Validate the $valid attribute of the form in the controller inside the function of the submit.

UPDATE

$scope.LoginValidator = function ($event) {
  $event.preventDefault();
  if($scope.LoginForm.$valid){
    console.log("valid");
  }else{
    console.log("invalid");
    console.log($scope.LoginForm.$error.require);
    if($scope.LoginForm.Email.$invalid){
      $scope.mailRequire = true;
    }
    if($scope.LoginForm.password.$invalid){
      $scope.passRequire = true;
    }
  }
  };

also for show the email required error. change html like this

<span style="color:red; display:block; text-align:center;"
      ng-show="mailRequire">* Email required</span>

here is the plnkr

edited Aug 23 '17 at 11:24

georgeawg

48,608
13
72
95

answered Aug 23 '17 at 06:07

Jesus Carrasco

1,355
1
11
15

thats right uptto some limit on calling $invalid but it shows error on loading of form and i want after clicking submit without redirecting – Anis Aug 23 '17 at 06:11
@MARahman then move the ng-submit from the form tag to an ng-click on the submit button – rrd Aug 23 '17 at 06:18
not necesarry to move the ng-submit, if prevent, i update the answer with an example hope helps and adapt you necesity its just an example. – Jesus Carrasco Aug 23 '17 at 06:20
@JesusCarrasco its working with error but its not calling action="/home" – Anis Aug 23 '17 at 06:39
we need to have $event.preventDefault(); at last of our work the in controller – Anis Aug 23 '17 at 06:49

How to show errors on submit in AngularJS and stop form from submitting without disabling the submit button?

1 Answers1