SentinelSixSpy SentinelSixSpy - 1 year ago 88
HTML Question

Display error message depending on if user is disabled or if input is invalid using JS/HTML

I want to display an error message under the 'Email Address' input if the user is disabled and display a separate error message if the user is invalid under the 'Password' input. When debugging I found that if a user is disabled the "Status code is 503" and if the input is invalid the "Status code is 400". (in auth-service-service.js).

This is the HTML (login.tpl.html)

<md-content id="login" layout="column" layout-align="center center" class="inputdemoErrors">
<div flex="25"></div>
<p class="m0">polaris</p>
<form id="loginForm">
<md-input-container>
<label for="username">Email Address</label>
</md-input-container>
<md-input-container class="email-field">
<input name="username" id="username" type="email" class="validate" ng-model="username" enter-key="submitLogin()" autocomplete="off" required>
<div ng-show="disabled" ng-messages="loginForm.username.$error" role="alert">
<div ng-message="required">User Account is Disabled</div>
</div>
</md-input-container>
<md-input-container>
<label for="password">Password</label>
</md-input-container>
<md-input-container class="password-field">
<input name="password" id="password" type="password" class="validate" ng-model="password" enter-key="submitLogin()" autocomplete="off" required>
<div ng-show="invalid" ng-messages="loginForm.password.$error" role="alert">
<div ng-message="required">Invalid Email or Password</div>
</div>
</md-input-container>
<a class="waves-effect waves-light btn-large" style="width: 100%; margin: 0; background-color: #29B6F6;" ng-click="submitLogin()">Login</a>
</form>
</md-content>


This is the JS (login-controller.js)

Any help would be greatly appreciated. Again I am trying to display "User Account is Disabled" if the user is disabled (503), and "Email or Password is Invalid" if they have an invalid input (400). This should happen when the login button is clicked. (submitLogin)

Answer Source

Hard to give a good answer without knowing what functionality you want with the ng-messages.

If you omit ng-messages:

<div ng-show="showDisabled">
  User Account is Disabled
</div>
<div ng-show="showInvalid">
  Invalid Email or Password
</div>

The following doesn't look right, so remove it for now:

if (response = 503)
{
  $scope.disabled = $scope.loginForm.$disabled;
  if ($scope.invalid) return invalid;
}
if (response = 400)
{
  $scope.invalid = $scope.loginForm.$invalid;
  if ($scope.invalid) return invalid;
}

It doesn't look like the return values are used anywhere and it should be response === x, not response = x.

Replace with:

$scope.showDisabled = response === 503;
$scope.showInvalid = response === 400;

Another note, if you need to access the form like this:

ng-messages="loginForm.password.$error"

The form needs a name:

<form name="loginForm">

Instead of id:

<form id="loginForm">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download