Configuring validation tooltips with angular-ui

Question

I am doing a simple form using angularjs with angular-ui. Somehow angular is inserting boostrap tooltips into my validation. But it is getting inserted automatically and I do not know how to control/customize or disable the tooltips. Here is my html:

<form name="frm" ng-submit="contact.contactUsSubmit(frm)">

                                <table id="tblContactUs">
                                    <tr>
                                        <td id="tblContactUsTitleTd">
                                            Send us an email
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="LabelStyle1">Name:</span><br/>
                                            <input type="text" tooltip-trigger="0" name="name" style="width: 75%" ng-model="contact.formInfo.name" required/><br/>
                                            <span ng-show="frm.name.$dirty && frm.name.$error.required" class="errorMsg">Required!<br /></span>
                                            <span class="LabelStyle1">Email:</span> <br/>
                                            <input type="email" name="email" style="width: 75%" ng-model="contact.formInfo.email" required/><br/>
                                            <span ng-show="frm.email.$dirty && frm.email.$error.required" class="errorMsg">Required!<br /></span>
                                            <span ng-show="frm.email.$dirty && frm.email.$error.email" class="errorMsg">Not a valid email!<br /></span>
                                            <span class="LabelStyle1">Message:</span> <br/>
                                            <textarea name="message" rows="5" style="width: 100%" ng-model="contact.formInfo.message" required></textarea><br/>
                                            <span ng-show="frm.email.$dirty && frm.name.$error.required" class="errorMsg">Required!</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: right">
                                            <button>Submit</button>
                                        </td>
                                    </tr>
                                </table>



                            </form>

:

But I am getting this:

Yes the tooltip is nice. But I didn't say I wanted it there. IF I want to use the tooltip for validation, I need to be able to customize the message (for different languages). I have googled the bejesus out the topic but I can't find answers as to how to configure it or to turn it off. I don't even know why its there in the first place. Any help would be much appreciated.

charlietfl · Accepted Answer · 2015-10-17 17:40:59Z

2

Those aren't bootstrap or even css related in any way.

They are html5 validation tooltips that are part of the browser itself.

If you don't want to use built in browser validation add the novalidate attribute to <form> tag.

<form name="frm" ng-submit="contact.contactUsSubmit(frm)" novalidate>

Reference MDN <form> docs

edited Oct 17, 2015 at 17:40

answered Oct 17, 2015 at 17:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

5 Comments

brando Over a year ago

Thanks for the clarification! However, when I put "novalidate" in the form tag you can hit submit and the angular validation does not fire, i.e. i can then submit the form without any data or with incorrect data.

charlietfl Over a year ago

ng-submit shouldn't fire when form not valid ... as a safe guard can check the $valid property of form object. What is contact? Is that a controller alias? If so should be part of the form name also

charlietfl Over a year ago

OK... the form validation object will get added to controller scope based on it's name so name should include controller object also.

brando Over a year ago

In this case the form name is "frm." i tried referencing $scope.frm but it was undefined. So I passed the "frm" object into ng-submit="contact.contactUsSubmit(frm)". Unfortunately, with "novalidate" set, my validation rules don't fire with ng-submit. They only fire after user leaves field (on blur).

charlietfl Over a year ago

should be contact.frm since you have controller alias...then safe check would be in controller to check the $valid property. Also need to fix all the validation messages

brando · Accepted Answer · 2015-10-17 18:30:59Z

Thank you to charlietfl for putting me on the right track with "novalidate." The problem with novalidate, however, is that when you hit ng-submit none of the validation error messages showed up.

The complete solution was to add the following code to the form tag ("contact" an alias for "contactController":

<form name="frm" ng-submit="contact.formIsValid(frm) && contact.contactUsSubmit(frm)" novalidate>

In the controller the two functions went as follows:

        formIsValid(frm) {
            
            angular.forEach(frm.$error.required, function (field) {
                field.$setDirty();
            });

            return frm.$valid;

        }

contactUsSubmit(frm) {
            var scope = this;
            if (frm.$valid) {
                //do $http post data etc here

               
            }



            return frm.$valid;
        }

Now, if when someone hits submit, the field are made "dirty" and this causes the angular validation rules to fire. If the form is valid then the submit goes thru, if not then we are left with the validation errors.

Collectives™ on Stack Overflow

Configuring validation tooltips with angular-ui

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related