Last Comment Bug 724537 - Form submission fails if an input is required and hidden (display:none): provide a workaround for the user
: Form submission fails if an input is required and hidden (display:none): prov...
Status: RESOLVED DUPLICATE of bug 630495
Product: Firefox
Classification: Client Software
Component: General (show other bugs)
: Trunk
: All All
-- normal (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
Depends on:
  Show dependency treegraph
Reported: 2012-02-06 06:34 PST by Richard Neill
Modified: 2012-04-17 00:29 PDT (History)
2 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Description User image Richard Neill 2012-02-06 06:34:43 PST
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.
Comment 1 User image Nickolay_Ponomarev 2012-04-15 13:54:36 PDT
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.
Comment 2 User image Mounir Lamouri (:mounir) 2012-04-17 00:29:38 PDT
I finally found the bug that was originally created for that: bug 630495

*** This bug has been marked as a duplicate of bug 630495 ***

Note You need to log in before you can comment on or make changes to this bug.