MA Rahman MA Rahman - 6 months ago 30
AngularJS Question

Is it possible to show errors on submit in angular js and stop form from submitting without disabling the submit button?

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"
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>
<input type="submit" value="LOG IN" />


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) {

Answer Source

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


$scope.LoginValidator = function ($event) {
      $scope.mailRequire = true;
      $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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download