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