Bug: Firefox: Input fields with 'required' get red shadow/border before submitting

[ThomasLandauer]

Firefox 38.0.5
AngularJS 1.4.0

input fields get the red invalid border/shadow on pageload (i.e. before the form is submitted), if all three conditions are met:

• ng-app defined
• ng-model set to any name
• required attribute present

Here's a fiddle: https://jsfiddle.net/5yh58orm/11/

In Chrome 43.0 and Internet Explorer 11 there is (as expected) no border.

[timjacobi]

I don't really see that being a problem with angular but with firefox
http://stackoverflow.com/questions/3809146/firefox-4-required-input-form-red-border-outline

[ThomasLandauer]

@timjacobi: Your link applies to disabling the red shadow entirely (i.e. after form submission too). The only (sort-of) relevant discussion I found is here: http://stackoverflow.com/questions/17209057/firefox-draws-red-border-on-required-select-box/30812303

My suggestion: Apply a class ng-submitted (or similar) as soon as the user submits the form.

Reason: When clicking the submit button without ever focussing somewhere else, the ng-classes don't change at all. Therefore, the status "form was just rendered" and the status "user has already tried to submit" can't be distinguished in CSS - that's why all work-arounds like this don't really work:
.ng-untouched.ng-invalid-required { box-shadow:none; }

(I'm talking about the situation where novalidate is not set; i.e. keeping the browser's internal validation.)

[lgalfaso]

You have to disable the native browser validation. Eg. <form novalidate>

[ThomasLandauer]

Come on, what kind of answer is that?
I could also tell all users not to use Firefox......

Now, seriously, is it an official system requirement for AngularJS to disable native browser validation? I thought it was just a recommendation?

In my opinion there are valid reasons to keep native browser validation - e.g. not having to bother with designing/styling error messages. AngularJS is promoted to reduce programmers' work, not to increase it (from homepage: "Write less code, go have beer sooner."). So if you are not going to fix this, it's certainly a case of "Write more code"....

So please reopen this.

[lgalfaso]

@ThomasLandauer I am not trying to tell you what do to and what not to do. The same red border is present if you put require on an input field in Firefox without this being an Angular app. The question would be, why is this an issue with Angular and opened here? What is Angular specific in your example?

[lgalfaso]

Let me open this and try to see if it is possible to work around this Firefox limitation

[ThomasLandauer]

As explained above: The red border is only there if all three conditions are met (i.e. AngularJS is active): Check out the fiddle, remove ng-model and reload (F5 sometimes doesn't work, needs Ctrl+F5) => The red border is gone! So this is an Angular issue.

[lgalfaso]

@ThomasLandauer this is an issue with Firefox, Firefox code triggers the form validation when setting an element value using JavaScript and the value is the same as the current value. Created #12106 to handle this case, but the fix would only work for jqLite (a different workaround would be needed for jQuery).

The fact that you need Angular to trigger this behavior does not imply that this is an Angular issue as it is possible to trigger the same behavior without Angular.

[timjacobi]

Still in doubt? Updated fiddle not using any Angular.
https://jsfiddle.net/5yh58orm/14/

[lgalfaso]

https://jsfiddle.net/5yh58orm/17/ is equivalent to the example that @timjacobi posted, but clearly shows this is a Firefox issue

[gkalpak]

My suggestion: Apply a class ng-submitted (or similar) as soon as the user submits the form.

FWIW, there IS an ng-submitted class and it's applied to the form once it's submitted, so you can use it to style your inputs.

[ThomasLandauer]

@lgalfaso: I wouldn't call it a Firefox issue, but rather an incompability between Firefox and Anulgar ;-) But anyway, thanks for opening the other issue!! :-)

@gkalpak: Yeah, thanks, I noticed that meanwhile ;-) BUT: ng-submitted is only applied after the form has actually been submitted (i.e. at a moment in time where any validation&highlighting is obviously obsolete). I'm talking about the moment when the user unsuccessfully tried to submit. It would ne nice if Angular could set a class then - a better class name would probably be ng-unsuccessful-submit.

[gkalpak]

@ThomasLandauer, I see what you mean about adding a class to indicate unsuccessful submitting.

But I don't think this is a widely used/needed option. Note that several people have requested different classes to be added by ngModelController/formController to indicate all sorts of events (e.g. focus).
Angular has implemented some that are considered commonly useful (such as ng-dirty/ng-pristine, ng-touched/ng-untouched, ng-submitted), but it doesn't make sense to add too many classes trying to cover all usecases.

That said, it is pretty easy to implement any extra functionality outside of the core.

[ThomasLandauer]

Yeah sure, you certainly can't add a class for everything ;-)

But generally, I prefer native browser functionality over anything self-designed, cause it gives a better user experience. In this case: Firefoxes native red shadow & popup tooltip is familiar to the user (cause they've probably seen it a hundred times before), my design is new to the user.

Well, the issue is on file anyway, so if anybody wants it too, please leave a comment. And if I'm the only one, forget about it ;-)

[eyahlin]

Thanks for working on this! This now works for all input fields except text area. Can you fix that too?

[EDIT] I fixed this temporarily by defining this CSS style to all my text area fields:
box-shadow:none

[gkalpak]

@eyahlin, since this issue is closed, please open a new one (referencing this one if related). Also providing a live demo of the problem helps a lot 😃

Thx!

[eoghanmurray]

I have submitted a Firefox bug report as I experienced it outside of Angular:
https://bugzilla.mozilla.org/show_bug.cgi?id=1399046

[lazaridis]

A same thing with primeng in angular 2. The point is put one or if necessary two,three classes to overwrate strong primeng classes. Put two of self class after them put some primeng class
.overwriteclass .overwriteclass2 .ng-valid[required], .ng-valid.required {
border: 1px solid #e1ea06 !important;
box-shadow: 0 0 3px #e1ea06 !;
}

[ccicchitelli]

Confirmed this is outside Angular, I'm having it with React and Material-UI (via Formsy).

[TPullen21]

For anyone else trying to circumvent this, you can override the default Firefox browser styling:

:-moz-ui-invalid:not(output) {
box-shadow: none;
}

(Obviously the not on the output element is optional).

[mseltene]

<form novalidate ...> ... </form> include novalidate otherwise you have to manually reset form. Such as using jquey $('.your-form-class').trigger("reset");