Hide tooltip with message in angular js with required field validator

Question

I need to show/hide a tooltip states of an input field: “This is a required field”. I am using a ng-required input tag.

 <form novalidate  name="CustAddressDetails">
<input type="text" name="txtResAddressLine1"  id="txtResidentialAddress1" ng-model="Address1" ng-required="true" />
<span ng-show="ShowAddressErrorMsg && CustAddressDetails.txtResAddressLine1.$error.required">Please enter the Residential Address.</span>
</form>

S i did, but the tool tip is always populating need to be hide — Manojprabakar
– Manojprabakar, Commented Nov 29, 2017 at 11:52
post that code then only we can know what's the problem with that, or otherwise how can we know the issue what you have faced — Kalaiselvan
– Kalaiselvan, Commented Nov 29, 2017 at 11:53
just use a condition on the length of your model and you're good to go — Guillaume Roche-Bayard
– Guillaume Roche-Bayard, Commented Nov 29, 2017 at 12:21

Kalaiselvan · Accepted Answer · 2017-11-29 12:29:11Z

1

here I have removed ShowAddressErrorMsg because once your form is valid you need to change it manually

     var app = angular.module('testApp',[]);
        app.controller('testCtrl',function($scope){

        });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="testApp" ng-controller="testCtrl">
    <form name="CustAddressDetails">
    <input type="text" name="txtResAddressLine1" id="txtResidentialAddress1" required ng-model="Address1" />
    <span ng-show="CustAddressDetails.txtResAddressLine1.$pristine || 
     CustAddressDetails.txtResAddressLine1.$untouched ||
       (CustAddressDetails.txtResAddressLine1.$touched || 
        CustAddressDetails.txtResAddressLine1.$invalid)">Pleas‌e enter the Residential Address.</span>
    <input type="submit"/>      
    </form>
    </div>

edited Nov 29, 2017 at 12:29

answered Nov 29, 2017 at 12:20

Kalaiselvan

2,1441 gold badge19 silver badges31 bronze badges

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

3 Comments

Guillaume Roche-Bayard Over a year ago

This isn't updated if you empty the field after typing something

Kalaiselvan Over a year ago

i missed to mention required in input field

Kalaiselvan Over a year ago

and I recommend you to use some validator for validation because everything is already available in that. no need to concentrate on silly mistakes. like jquery.validator.js is really good, i already did it using that and i have attached link with this codepen.io/kalaiselvan/pen/PzBNBY

Collectives™ on Stack Overflow

Hide tooltip with message in angular js with required field validator

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related