Closed Bug 724537 Opened 12 years ago Closed 12 years ago

Form submission fails if an input is required and hidden (display:none): provide a workaround for the user

Categories

(Firefox :: General, defect)

defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 630495

People

(Reporter: rn214, Unassigned)

Details

User Agent: Mozilla/5.0 (Ubuntu; X11; Linux i686; rv:9.0.1) Gecko/20100101 Firefox/9.0.1
Build ID: 20111221214946

Steps to reproduce:

Create a <FORM> where some elements are invisible, (either display:none or visibility:hidden). Also make those elements html5-required. 

In my specific test, I used:
 <div style='display:none'><textarea required></textarea></div>

Form submission fails.




Actual results:

If using "display:none", then form submission simply fails: clicking the submit button just doesn't work.

If using "visibility:hidden", then the form submission fails, but the tooltip "please fill in this field" appears, pointing to the blank space where the invisible textarea is.

IMHO, the UI is correctly responding (consistency -> least surprise) to the web designer's invalid and conflicting markup....but this doesn't help the unfortunate user.




Expected results:

I can see 2 solutions:

1. If a form element is invisible (either display:none or visibility:hidden), then the required attribute should be discarded.

2. If form submission fails due to a required-element being empty, then that element should automatically be made visible (so that the "please fill in this field" tooltip can point somewhere, and the user can type into it).

Personally, I prefer option 2: it may be cosmetically very ugly, but it will generally allow the end user to have a mostly-working site, rather than one which is completely broken. 

Yes, the Web developer should know better, but this is a very easy mistake to make (and one which is frequently missed by tests, and by validation), so I think Firefox should handle it more gracefully.
Thanks for the report!

(I almost marked this as a duplicste of bug 595451, when I noticed you commented there as well. In general it saves the triager's time to note other relevant bugs and explain how yours is different.)

Your solution #1 is similar in spirit to the one in bug 595451 comment 14.
I'm not sure what number of web pages will the solution #2 fix compared to the number of pages it will break even further.
Status: UNCONFIRMED → NEW
Component: Untriaged → General
Ever confirmed: true
OS: Linux → All
QA Contact: untriaged → general
Hardware: x86 → All
Version: 9 Branch → Trunk
Summary: Form submission fails if an input is required and display:none. (UI correct, but unhelpful) → Form submission fails if an input is required and hidden (display:none): provide a workaround for the user
Depends on: 595451
I finally found the bug that was originally created for that: bug 630495
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → DUPLICATE
No longer depends on: 595451
You need to log in before you can comment on or make changes to this bug.