Hide error message on text focus in angularjs

Question

I am beginner of angularjs. I just started on form validation. All is went right until i tried to hide the error message on input focus.

When i am hitting submit button it shows error message. After i focus on textbox it has to hide the error message

And this is my code:

  <form name="form" novalidate>
        <div>
            <label>Username</label>
            <input type="text" name="username" ng-model="username" ng-required="true" ng-minlength="5" ng-maxlength="7"/>

            <span class="errors" ng-show="(form.$submitted || form.username.$touched) && form.username.$error.required">Please fill username</span>
            <span class="errors" ng-show="form.username.$error.minlength">Username too short</span>
            <span class="errors" ng-show="form.username.$error.maxlength">Username too long</span>
        </div>
  </form>

Please someone help me

can you describe your problem a bit more? what did you do to "hide" the error message? — ssbb
– ssbb, Commented Jul 16, 2015 at 11:58
Consider using ng-focus docs.angularjs.org/api/ng/directive/ngFocus — Okazari
– Okazari, Commented Jul 16, 2015 at 12:12

manoj · Accepted Answer · 2015-07-16 12:23:30Z

3

this is just a trick, try if this works :

<form name="form" novalidate>
    <div>
        <label>Username</label>
        <input type="text" name="username" ng-model="username" ng-required="true" ng-minlength="5" ng-maxlength="7" ng-focus="focused=true"/>

        <span class="errors" ng-show="(form.$submitted || form.username.$touched) && form.username.$error.required && !focused">Please fill username</span>
        <span class="errors" ng-show="form.username.$error.minlength && !focused">Username too short</span>
        <span class="errors" ng-show="form.username.$error.maxlength && !focused">Username too long</span>
    </div>
</form>

NB : on clicking submit, make focused = false;

edited Jul 16, 2015 at 12:23

answered Jul 16, 2015 at 12:15

manoj

3,8212 gold badges24 silver badges30 bronze badges

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

1 Comment

manoj Over a year ago

did you try focused = false on submiting ?

Girdhar Singh Rathore · Accepted Answer · 2015-07-16 12:06:26Z

0

I guess you forgot to mention ng-app directive

answered Jul 16, 2015 at 12:06

Girdhar Singh Rathore

5,6718 gold badges59 silver badges70 bronze badges

Comments

Jerin George · Accepted Answer · 2018-11-23 12:02:52Z

0

use ng blur for show instant message on just leaving input field :

<form name="form" novalidate>
    <div>
        <label>Username</label>
        <input type="text" name="username" ng-model="username" ng-required ng-minlength="5" ng-maxlength="7" ng-blur="focused=false" ng-focus="focused=true"/>

        <span class="errors" ng-show="(form.$submitted || form.username.$touched) && form.username.$error.required && !focused">Please fill username</span>
        <span class="errors" ng-show="form.username.$error.minlength && !focused">Username too short</span>
        <span class="errors" ng-show="form.username.$error.maxlength && !focused">Username too long</span>
    </div>
</form>

answered Nov 23, 2018 at 12:02

Jerin George

236 bronze badges

Collectives™ on Stack Overflow

Hide error message on text focus in angularjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related