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

Status: RESOLVED INVALID

(Core :: General, defect)

Description

[ioannis.sfakianakis]

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)

Comment 1

[Boris Zbarsky [:bzbarsky]]

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.