Show error if button clicked and input text empty AngularJs

Question

I create a login page , I show error if user click in input text and let him empty

but I need to show error if user don't click in input text and click login button

My code :

<form ng-submit="userForm.$valid && submit()" name="userForm" novalidate>
   <div class="form-group" ng-class="{ 'has-error': userForm.login.$touched && userForm.login.$invalid }">
      <input type="text" name="login"  placeholder="اسم المستخدم" class="form-control" ng-model="MainCtrl.login" ng-minlength="5" ng-maxlength="10" required>
      <div class="help-block" ng-messages="userForm.login.$error" ng-if="userForm.login.$touched">
         <p ng-message="required">إسم المستخدم إجباري</p>
         <p ng-message="minlength">إسم المستخدم قصير</p>
         <p ng-message="maxlength">إسم المستخدم طويل</p>
      </div>
      <i class="fa fa-user"></i>
   </div>
   <div class="form-group" ng-class="{ 'has-error': userForm.pass.$touched && userForm.pass.$invalid }">
      <input type="password" name="pass" placeholder="كلمه السر" class="form-control" ng-model="MainCtrl.pass" ng-minlength="5" ng-maxlength="20" required>
      <div class="help-block" ng-messages="userForm.pass.$error" ng-if="userForm.pass.$touched">
         <p ng-message="required">كلمة السر اجبارية</p>
         <p ng-message="minlength">كلمة السر قصيرة</p>
         <p ng-message="maxlength">كلمة السر طويلة</p>
      </div>
      <i class="fa fa-lock"></i>
   </div>
   <div class="form-group">
      <button type="submit" class="log-btn">دخول</button>
   </div>
</form>

this is my code in plunker

i create a login formulair i have ng-messages if user click in input text but not write aby thing the error show but if user d'ont write in input text and click button submit no msg error showed in nedd to add a msg error if tow input text vide and button clicked please vist this link its my work : plnkr.co/edit/iT4ZVUaFktE7Lso7SFYU?p=preview — Mawrene
– Mawrene, Commented May 13, 2017 at 15:08
here is the good reference stackoverflow.com/questions/17452247/… — Shohel
– Shohel, Commented May 13, 2017 at 15:24

Nicolas R · Accepted Answer · 2017-05-13 15:21:00Z

1

You can us required="" on your input tag and userForm.$submitted on your error messages block:

<div class="form-group" ng-class="{ 'has-error': (userForm.login.$touched && userForm.login.$invalid) ||  (userForm.$submitted && userForm.login.$invalid)}">
   <input type="text" name="login"  placeholder="اسم المستخدم" class="form-control" ng-model="MainCtrl.login" ng-minlength="5" ng-maxlength="10" required="">
   <div class="help-block" ng-messages="userForm.login.$error" ng-show="userForm.$submitted || userForm.login.$touched">
      <p ng-show="userForm.login.$error.required" ng-message="required">required error</p>
      <p ng-show="userForm.login.$error.minlength">minLength error</p>
      <p ng-show="userForm.login.$error.maxlength">maxLength error</p>
   </div>
   <i class="fa fa-user"></i>
</div>

DEMO

edited May 13, 2017 at 15:21

answered May 13, 2017 at 15:15

Nicolas R

2831 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Show error if button clicked and input text empty AngularJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related