CODEWITHSUNDEEP
angularjs
Manoj Khatri
Manoj Khatri

Reputation: 674

Submitting form without filling the field does not show error [AngularJS]

Here is my code. Here I want to show the error if user presses submit button without filling the field. Currently its not working.

<form name="loginForm" ng-submit="loginForm.$valid && login()" novalidate autocomplete="off">
<!-- <div class="form_line"> -->
<div class="form-login">
    <div class="form-group" ng-class="{ 'has-error': (loginForm.email.$touched || submitted) && loginForm.email.$invalid }">
        <label for="Email"><span translate="login.Email"></span></label>
        <input type="email" class="form-control" name="email" ng-model="userData.email" required novalidate>
    </div>
    <div class="help-block" ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched">
        <p ng-message="required"><span translate="login.validate-require"></span></p>
        <p ng-message="email"><span translate="login.validate-email"></span></p>
    </div>
    <div class="form-group" ng.class="{ 'has-error': (loginForm.password.$touched || submitted) && loginForm.password.$invalid }">
        <label for="Password"><span translate="login.Password"></span></label>
        <input type="password" class="form-control" name="password" ng-model="userData.password" ng-minlength="4" ng-maxlenght="20" required novalidate>
    </div>
    <div class="help-block" ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched">
        <p ng-message="required"><span translate="login.validate-psw"></span></p>
        <div ng-message="minlength">Message must be over 8 characters</div>
        <p ng-message="loginForm.password.$error">small password</p>
    </div>
    <div class="form-submit">
        <button type="submit" class="form-login_submit__btn" ng-click="submitted=true" translate="login.login">
            login
        </button>
    </div>

Upvotes: 0

Views: 461

Answers (6)

Manoj Khatri
Manoj Khatri

Reputation: 674

I make it done with this code

<div class="help-block" ng-messages="loginForm.email.$error" ng-show='loginForm.$submitted || loginForm.email.$dirty || loginForm.email.$touched' role="alert">
<p ng-message="required"><span translate="login.validate-require"></span></p>

OR you can use it

<div class="help-block" ng-messages="loginForm.email.$error"
     ng-if="loginForm.$submitted || loginForm.email.$dirty ||loginForm.email.$touched">   
  <p ng-message="minlength"><span translate="login.validate-short">   
</span></p>
 <p ng-message="maxlength"><span translate="login.validate-long">     </span></p> -->
 <p ng-message="required"><span translate="login.validate-require">    </span></p>
<p ng-message="email"><span translate="login.validate-email"></span>    </p>-->
 </div>

Upvotes: 1

Rukmani Tripathi
Rukmani Tripathi

Reputation: 11

try defining translate attribute without using dash'-' ie. login.validate-require change it to login.validateRequire

Upvotes: 0

jaguwalapratik
jaguwalapratik

Reputation: 406

You don't have to add novalidate on every input control.

Add ng-required="true" instead of required

   <div class="form-group" ng-class="{ 'has-error': (loginForm.email.$touched || submitted) && loginForm.email.$invalid }">
        <label for="Email"><span translate="login.Email"></span></label>
        <input type="email" class="form-control" name="email" ng-model="userData.email" ng-required="true">
        <div class="help-block" ng-messages="loginForm.email.$error" ng-show="loginForm.email.$touched">
            <p ng-message="required"><span translate="login.validate-require"></span></p>
           <p ng-message="email"><span translate="login.validate-email"></span></p>
        </div>
    </div>

Upvotes: 0

md-5h04I3
md-5h04I3

Reputation: 214

All you need is to show the required errors when button is submitted so, in your ng-message section just add:

ng-show="loginForm.$submitted"

  <div class="help-block" ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched" ng-show="loginForm.$submitted">
    <p ng-message="required"><span translate="login.validate-require"></span></p>
    <p ng-message="email"><span translate="login.validate-email"></span></p>
  </div>

Upvotes: 1

nikjohn
nikjohn

Reputation: 21802

Could you try with ng-required="required" instead of just required? Also remove the no-validate from the input fields

Upvotes: 0

Rajindra Prabodhitha
Rajindra Prabodhitha

Reputation: 69

You can try like this : 

ng-if="loginForm.email.$error.$dirty || loginForm.email.$error.required"

Upvotes: 0

Related Questions