A red frame appears around html form when at least one for item has the REQUIRED (html5) property set

RESOLVED INVALID

Status

()

RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: ioannis.sfakianakis, Unassigned)

Tracking

13 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

6 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1
Build ID: 20120614114901

Steps to reproduce:

In my website, I created an html form with some form fields having the REQUIRED property set.


Actual results:

A red frame appears around the whole form. See:
http://www.villa-phoenix.com/en/zante-keri-villa-phoenix-reservations-en.php



Expected results:

A red frame should appear ONLY around each form element having the REQUIRED property set. (That happens up to Firefox 12.0; Bug appears at Firefox 13.0 at continues to 13.0.1 and 14.0 beta)
(Reporter)

Updated

6 years ago
You're adding a red shadow to all elements that match the selector ":invalid".

The spec at http://www.w3.org/TR/html5/links.html#selector-invalid says:

  The :invalid pseudo-class must match any element falling into one of the following
  categories:
...
    form elements that are the form owner of one or more elements that themselves are
    candidates for constraint validation but do not satisfy their constraints

which means that the <form> in your case must match :invalid.  So the behavior you're seeing is correct.  Note that this may have been a recent spec change, which is why you used to see different behavior.

Presumably you can use ":invalid:not(form)" to get the behavior you want here.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.