AngularJS field validation->styling "popup"

Question

Is there a way to style the "popup" when a field is invalid in AngularJS?

enter image description here

I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.

You might want to give a look a this question : http://stackoverflow.com/questions/5478800/override-css-for-html5-form-validation-required-popup — Clément Malet, Jul 14 '14 at 18:11

m.casey · Accepted Answer · 2014-07-14T18:32:29.893

6

That's the browser validation kicking in. Disable it as follows:

<form novalidate></form>

Edit: Example of a form using novalidate with AngularJS's validation:

 <form name="form" class="css-form" novalidate>
Name:
     <input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
     <input type="email" ng-model="user.email" name="uEmail" required/><br />
     <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
         <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
         <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
     </div>
</form>

I believe it is no longer possible to style these popups:

Link

edited Jul 14 '14 at 18:32

answered Jul 14 '14 at 18:09

m.casey

2,579
17
10

Can I use a jQuery validation plugin along with AngularJS? – MB34 Jul 14 '14 at 18:10
Also, would that attribute prohibit ng-validate working? – MB34 Jul 14 '14 at 18:11
MB34 yes and it's quite easy to use but too much hicky :) – Whisher Jul 14 '14 at 18:11
1

ng-validate will continue to work as normal. Using jQuery validation alongside Angular's is not advisable. – m.casey Jul 14 '14 at 18:28

AngularJS field validation->styling "popup"

1 Answers1