Skip to content
This repository has been archived by the owner on Apr 13, 2022. It is now read-only.

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

Closed
ThomasLandauer opened this issue Jun 12, 2015 · 21 comments

Comments

@ThomasLandauer
Copy link
Contributor

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
Copy link

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
Copy link
Contributor Author

@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
Copy link
Contributor

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

@ThomasLandauer
Copy link
Contributor Author

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
Copy link
Contributor

@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
Copy link
Contributor

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

@lgalfaso lgalfaso reopened this Jun 13, 2015
@ThomasLandauer
Copy link
Contributor Author

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 added a commit to lgalfaso/angular.js that referenced this issue Jun 13, 2015
Do not trigger Firefox validation on form initialization.
- Do not set a value to an <input> field if the field already has the same value

Closes angular#12102
@lgalfaso
Copy link
Contributor

@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
Copy link

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

@lgalfaso
Copy link
Contributor

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

@gkalpak
Copy link
Member

gkalpak commented Jun 15, 2015

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.

lgalfaso added a commit to lgalfaso/angular.js that referenced this issue Jun 15, 2015
Do not trigger Firefox validation on form initialization.
- Do not set a value to an <input> field if the field already has the same value

Closes angular#12102
@ThomasLandauer
Copy link
Contributor Author

@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
Copy link
Member

gkalpak commented Jun 16, 2015

@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
Copy link
Contributor Author

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 ;-)

lgalfaso added a commit to lgalfaso/angular.js that referenced this issue Jul 26, 2015
Do not trigger Firefox validation on form initialization.
- Do not set a value to an <input> field if the field already has the same value

Closes angular#12102
netman92 pushed a commit to netman92/angular.js that referenced this issue Aug 8, 2015
Do not trigger Firefox validation on form initialization.
- Do not set a value to an <input> field if the field already has the same value

Closes angular#12102
ggershoni pushed a commit to ggershoni/angular.js that referenced this issue Sep 29, 2015
Do not trigger Firefox validation on form initialization.
- Do not set a value to an <input> field if the field already has the same value

Closes angular#12102
@eyahlin
Copy link

eyahlin commented Jun 29, 2016

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
Copy link
Member

gkalpak commented Jun 30, 2016

@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
Copy link

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

@lazaridis
Copy link

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
Copy link

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

@TPullen21
Copy link

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
Copy link

mseltene commented Aug 22, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants