Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

firefox 57 does not handle required form fields correctly

more options

We introduced a new website a month ago based on w3.css for responsive design. One of our checkout forms includes to address blocks, one for billing and one for shipping. The division containing the shipping fields is not visible unless the user asks to add a new shipping address.

The problem is this:

Several on the key fields in the shipping block are marked as required. Even though the fields are not visible, Firefox Quantum refuses to submit the form because these hidden, required fields are not filled in. It also gives no indication that this is the problem, I assume because the error messages are being added within an invisible division.

Chrome and Explorer both ignore the hidden fields and submit the form, which, in my opinion is the correct behavior.

We introduced a new website a month ago based on w3.css for responsive design. One of our checkout forms includes to address blocks, one for billing and one for shipping. The division containing the shipping fields is not visible unless the user asks to add a new shipping address. The problem is this: Several on the key fields in the shipping block are marked as required. Even though the fields are not visible, Firefox Quantum refuses to submit the form because these hidden, required fields are not filled in. It also gives no indication that this is the problem, I assume because the error messages are being added within an invisible division. Chrome and Explorer both ignore the hidden fields and submit the form, which, in my opinion is the correct behavior.

All Replies (6)

more options

Forum and where?

more options

Could you create a reduced test case demonstrating the problem, or provide a link to the page (where hopefully one doesn't need to create an account to check the issue).

more options

I have had to develop a workaround which is now in place on our website, www.devotea.com.

The problem can be simulated by setting up a short form with two text input fields, both marked as required. Place the second field within a division with visibility:none.

Fill in the visible field and try to submit the form. Chrome or Explorer should comply without arguing about it, Firefox Quantum should do absolutely nothing, including no error message.

more options

teaman5 said

The problem can be simulated by setting up a short form with two text input fields, both marked as required. Place the second field within a division with visibility:none.

Yes, but web developers usually are in a better position than support volunteers to be able to whip up test cases.

Also, none is not one of the conventional values for the visibility property. https://developer.mozilla.org/docs/Web/CSS/visibility

more options

Since I have already invested a day and a half in identifying the problem and developing a work around, I'm not interested in doing any more work on it. I posted the question to alert the mozilla team to a situation where Quantum is handling CSS and HTML differently from Chrome and Explorer, and also from the previous version of Firefox. That is a design issue that they need to either address or ignore as they see fit.

Yes, "hidden" is correct form.

This question can be closed as far as I'm concerned.

more options

Okay, someone else can file a bug for it when it bites them.

https://bugzilla.mozilla.org/