Tweak :user-error definition and give it its own section: it's more than about just :invalid elements, so shouldn't be grouped with those. Also maintain the normative statement about elements that match neither :valid nor :invalid.

fantasai · fantasai · commit 783cd0c55472 · 2012-08-15T18:33:20.000-07:00
--HG--
extra : rebase_source : 8cdc2a8382e2fb495db57be31e16a5d10310da5d
diff --git a/selectors4/Overview.html b/selectors4/Overview.html
@@ -19,12 +19,12 @@
 
    <h1 id=title>Selectors Level 4</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 August 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 16 August 2012</h2>
 
    <dl>
     <dt>This version: <!--
-    <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120814/">
-                 http://www.w3.org/TR/2012/WD-selectors4-20120814/</a>
+    <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120816/">
+                 http://www.w3.org/TR/2012/WD-selectors4-20120816/</a>
 
     <dt>Editor's draft:
 -->
@@ -320,8 +320,8 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
       default option pseudo-class <code>:default</code></a>
 
      <li><a href="#validity-pseudos"><span class=secno>11.5. </span> The
-      validity pseudo-classes: <code>:valid</code>, <code>:invalid</code>,
-      and <code>:user-error</code></a>
+      validity pseudo-classes: <code>:valid</code> and
+      <code>:invalid</code></a>
 
      <li><a href="#range-pseudos"><span class=secno>11.6. </span> The range
       pseudo-classes <code>:in-range</code> and
@@ -331,7 +331,10 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
       optionality pseudo-classes <code>:required</code> and
       <code>:optional</code></a>
 
-     <li><a href="#rw-pseudos"><span class=secno>11.8. </span> The mutability
+     <li><a href="#user-pseudos"><span class=secno>11.8. </span> The
+      user-interaction pseudo-class <code>:user-error</code></a>
+
+     <li><a href="#rw-pseudos"><span class=secno>11.9. </span> The mutability
       pseudo-classes <code>:read-only</code> and <code>:read-write</code></a>
       
     </ul>
@@ -1240,14 +1243,14 @@ <h3 id=scoping><span class=secno>3.3. </span> Scoped Selectors</h3>
    href="#scope-pseudo"><code>:scope</code></a> pseudo-class.
 
   <div class=example>
-   <p> For example, the <code>document.querySelector()</code> function
-    defined in <a href="#SELECTORS-API2"
+   <p> For example, the <code>element.querySelector()</code> function defined
+    in <a href="#SELECTORS-API2"
     rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> allows the
     author to define a <a
     href="#scope-constrained"><i>scope-constrained</i></a> selector.
 
-   <p> On the other hand, the <code>document.find()</code> function defined
-    in <a href="#SELECTORS-API2"
+   <p> On the other hand, the <code>element.find()</code> function defined in
+    <a href="#SELECTORS-API2"
     rel=biblioentry>[SELECTORS-API2]<!--{{SELECTORS-API2}}--></a> and the
     selectors within an <a href="#HTML5"
     rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> scoped stylesheet, define <a
@@ -1894,7 +1897,8 @@ <h3 id=attribute-case><span class=secno>6.3. </span> Case-sensitivity</h3>
     has a value of <code>hsides</code>, whether that value is represented as
     <code>hsides</code>, <code>HSIDES</code>, <code>hSides</code>, etc. even
     in an XML environment where attribute values are case-sensitive.
-    f<!-- -->[frame=hsides i] { border-style: solid none; }
+
+   <pre>[frame=hsides i] { border-style: solid none; }</pre>
   </div>
   <!-- plinss notes we may eventually want to choose other normalizations
        for attribute matching; but since there's no normalization scheme
@@ -2787,64 +2791,27 @@ <h3 id=the-default-pseudo><span class=secno>11.4. </span> The default
    selection of pizza toppings for example.
 
   <h3 id=validity-pseudos><span class=secno>11.5. </span> The validity
-   pseudo-classes: <a href="#valid-pseudo"><code>:valid</code></a>, <a
-   href="#invalid-pseudo"><code>:invalid</code></a>, and <a
-   href="#user-error-pseudo"><code>:user-error</code></a></h3>
+   pseudo-classes: <a href="#valid-pseudo"><code>:valid</code></a> and <a
+   href="#invalid-pseudo"><code>:invalid</code></a></h3>
 
   <p> An element is <dfn id=valid-pseudo>:valid</dfn> or <dfn
    id=invalid-pseudo>:invalid</dfn> when its contents or value is,
    respectively, valid or invalid with respect to data validity semantics
    defined by the document language (e.g. [[XFORMS10]] or <a href="#HTML5"
-   rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>).
+   rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>). An element which lacks data
+   validity semantics is neither <a
+   href="#valid-pseudo"><code>:valid</code></a> nor <a
+   href="#invalid-pseudo"><code>:invalid</code></a>.
 
-  <p> Note that there is a difference between an element which has no
-   constraints, and thus would always be <a
+  <p class=note> Note that there is a difference between an element which has
+   no constraints, and thus would always be <a
    href="#valid-pseudo"><code>:valid</code></a>, and one which has no data
    validity semantics at all, and thus is neither <a
    href="#valid-pseudo"><code>:valid</code></a> nor <a
    href="#invalid-pseudo"><code>:invalid</code></a>. In HTML, for example, an
    <code>&lt;input type="text"></code> element may have no constraints, but a
    <code>&lt;p></code> element has no validity semantics at all, and so it
-   never matches either of these pseudoclasses.
-
-  <p> The <dfn id=user-error-pseudo>:user-error</dfn> pseudo-class matches
-   the same elements as <a href="#invalid-pseudo"><code>:invalid</code></a>,
-   but it only does so after the user has interacted with them. The <a
-   href="#user-error-pseudo"><code>:user-error</code></a> pseudo-class must
-   match elements that are invalid after the user attempts to submit the form
-   containing them. User-agents may allow it to match invalid elements
-   earlier, if they determine (in a UA-specific manner) that the user has
-   "significantly interacted" with them.
-
-  <div class=example>
-   <p> For example, the input in the following document fragment would match
-    <a href="#invalid-pseudo"><code>:invalid</code></a> as soon as the page
-    is loaded (because it’s empty, which violates the "required"
-    constraint), but it won't match <a
-    href="#user-error-pseudo"><code>:user-error</code></a> until the user
-    significantly interacts with the element, or attempts to submit the form
-    it's part of.
-
-   <pre><!--
-    -->&lt;form>
-<!--
-    -->  &lt;label>
-<!--
-    -->    First Name:
-<!--
-    -->    &lt;input name='first-name' required value=''>
-<!--
-    -->  &lt;/label>
-<!--
-    -->  ...
-<!--
-    -->&lt;/form>&lt;/pre>
-  </pre>
-  </div>
-
-  <p class=issue> What parts of <a
-   href="https://developer.mozilla.org/en-US/docs/CSS/:-moz-ui-invalid">:-moz-ui-invalid
-   description</a> do we want to spec here? Or put as examples?
+   never matches either of these pseudo-classes.
 
   <h3 id=range-pseudos><span class=secno>11.6. </span> The range
    pseudo-classes <a href="#in-range-psuedo"><code>:in-range</code></a> and
@@ -2875,7 +2842,69 @@ <h3 id=opt-pseudos><span class=secno>11.7. </span> The optionality
    submitted. Elements that are not form elements are neither required nor
    optional.
 
-  <h3 id=rw-pseudos><span class=secno>11.8. </span> The mutability
+  <h3 id=user-pseudos><span class=secno>11.8. </span> The user-interaction
+   pseudo-class <a href="#user-error-pseudo"><code>:user-error</code></a></h3>
+
+  <p> The <dfn id=user-error-pseudo>:user-error</dfn> pseudo-class represents
+   an input element with incorrect input, but only <em>after</em> the user
+   has significantly interacted with it. The <a
+   href="#user-error-pseudo"><code>:user-error</code></a> pseudo-class must
+   match an <a href="#invalid-pseudo"><code>:invalid</code></a>, <a
+   href="#out-of-range-pseudo"><code>:out-of-range</code></a>, or
+   empty-but-<a href="#required-pseudo"><code>:required</code></a> form
+   element between the time the user has attempted to submit the form and
+   before the user has interacted again with the form element. User-agents
+   may allow it to match such elements at other times, as would be
+   appropriate for highlighting an error to the user. For example, a UA may
+   choose to have <a href="#user-error-pseudo"><code>:user-error</code></a>
+   match an <a href="#invalid-pseudo"><code>:invalid</code></a> element once
+   the user has typed some text into it and changed the focus to another
+   element, and to stop matching only after the user has successfully
+   corrected the input.
+
+  <div class=example>
+   <p> For example, the input in the following document fragment would match
+    <a href="#invalid-pseudo"><code>:invalid</code></a> as soon as the page
+    is loaded (because it the initial value violates the max-constraint), but
+    it won’t match <a
+    href="#user-error-pseudo"><code>:user-error</code></a> until the user
+    significantly interacts with the element, or attempts to submit the form
+    it's part of.
+
+   <pre><!--
+    -->&lt;form>
+<!--
+    -->  &lt;label>
+<!--
+    -->    Volume:
+<!--
+    -->    &lt;input name='vol' type=number min=0 max=10 value=11>
+<!--
+    -->  &lt;/label>
+<!--
+    -->  ...
+<!--
+    -->&lt;/form>&lt;/pre>
+  </pre>
+  </div>
+  <!--
+  <p class="issue">
+    If it's necessary to distinguish between omitted and invalid values,
+    <code>:user-invalid</code> and <code>:user-omitted</code> could be used.
+-->
+
+  <p class=issue> What parts of <a
+   href="https://developer.mozilla.org/en-US/docs/CSS/:-moz-ui-invalid">:-moz-ui-invalid
+   description</a> do we want to spec here? Or put as examples?
+
+  <p class=issue> There was a suggestion to have a
+   <code>:user-interacted</code> pseudo-class instead of or in addition to
+   this one. It's unclear what the criteria would be for matching it,
+   however. In particular, it seems unlikely to be a replacement of this one
+   if form validation of an untouched form control is not part of the
+   criteria.
+
+  <h3 id=rw-pseudos><span class=secno>11.9. </span> The mutability
    pseudo-classes <a href="#read-only-pseudo"><code>:read-only</code></a> and
    <a href="#read-write-pseudo"><code>:read-write</code></a></h3>
 
diff --git a/selectors4/Overview.src.html b/selectors4/Overview.src.html
@@ -614,11 +614,11 @@ <h3 id="scoping">
   <div class='example'>
     <p>
       For example,
-      the <code>document.querySelector()</code> function defined in [[SELECTORS-API2]]
+      the <code>element.querySelector()</code> function defined in [[SELECTORS-API2]]
       allows the author to define a <i>scope-constrained</i> selector.
 
     <p>
-      On the other hand, the <code>document.find()</code> function defined in [[SELECTORS-API2]]
+      On the other hand, the <code>element.find()</code> function defined in [[SELECTORS-API2]]
       and the selectors within an [[HTML5]] scoped stylesheet,
       define <i>scope-contained</i> selectors.
   </div>
@@ -1188,8 +1188,7 @@ <h3 id="attribute-case">
       has a value of <code>hsides</code>, whether that value is represented
       as <code>hsides</code>, <code>HSIDES</code>, <code>hSides</code>, etc.
       even in an XML environment where attribute values are case-sensitive.
-    f<!-- -->[frame=hsides i] { border-style: solid none; }
-    </pre>
+    <pre>[frame=hsides i] { border-style: solid none; }</pre>
   </div>
 
   <!-- plinss notes we may eventually want to choose other normalizations
@@ -1957,56 +1956,24 @@ <h3 id="the-default-pseudo">
   like a selection of pizza toppings for example.
 
 <h3 id="validity-pseudos">
-The validity pseudo-classes: <code>:valid</code>, <code>:invalid</code>, and <code>:user-error</code></h3>
+The validity pseudo-classes: <code>:valid</code> and <code>:invalid</code></h3>
   
   <p>
     An element is <dfn id="valid-pseudo">:valid</dfn> 
     or <dfn id="invalid-pseudo">:invalid</dfn> 
     when its contents or value is, respectively, 
     valid or invalid with respect to data validity semantics defined by the document language 
     (e.g. [[XFORMS10]] or [[HTML5]]).
+    An element which lacks data validity semantics is neither <code>:valid</code> nor <code>:invalid</code>.
 
-  <p>
+  <p class="note">
     Note that there is a difference between an element which has no constraints,
     and thus would always be <code>:valid</code>,
     and one which has no data validity semantics at all,
     and thus is neither <code>:valid</code> nor <code>:invalid</code>.
     In HTML, for example, an <code>&lt;input type="text"></code> element may have no constraints,
     but a <code>&lt;p></code> element has no validity semantics at all,
-    and so it never matches either of these pseudoclasses.
-
-  <p>
-    The <dfn id="user-error-pseudo">:user-error</dfn> pseudo-class
-    matches the same elements as <code>:invalid</code>,
-    but it only does so after the user has interacted with them.
-    The <code>:user-error</code> pseudo-class must match elements that are invalid
-    after the user attempts to submit the form containing them.
-    User-agents may allow it to match invalid elements earlier,
-    if they determine
-    (in a UA-specific manner)
-    that the user has "significantly interacted" with them.
-
-  <div class='example'>
-    <p>
-      For example, the input in the following document fragment
-      would match <code>:invalid</code> as soon as the page is loaded
-      (because it's empty, which violates the "required" constraint),
-      but it won't match <code>:user-error</code> until the user significantly interacts with the element,
-      or attempts to submit the form it's part of.
-
-    <pre><!--
-    -->&lt;form>&#xa;<!--
-    -->  &lt;label>&#xa;<!--
-    -->    First Name:&#xa;<!--
-    -->    &lt;input name='first-name' required value=''>&#xa;<!--
-    -->  &lt;/label>&#xa;<!--
-    -->  ...&#xa;<!--
-    -->&lt;/form>&lt;/pre>
-  </div>
-
-  <p class="issue">
-    What parts of <a href="https://developer.mozilla.org/en-US/docs/CSS/:-moz-ui-invalid">:-moz-ui-invalid description</a> do we want to spec here?
-    Or put as examples?
+    and so it never matches either of these pseudo-classes.
 
 <h3 id="range-pseudos">
 The range pseudo-classes <code>:in-range</code> and <code>:out-of-range</code></h3>
@@ -2033,6 +2000,58 @@ <h3 id="opt-pseudos">
   form it belongs to can be validly submitted. Elements that are not
   form elements are neither required nor optional.
 
+<h3 id="user-pseudos">
+The user-interaction pseudo-class <code>:user-error</code></h3>
+
+  <p>
+    The <dfn id="user-error-pseudo">:user-error</dfn> pseudo-class
+    represents an input element with incorrect input, but only
+    <em>after</em> the user has significantly interacted with it.
+    The <code>:user-error</code> pseudo-class
+    must match an <code>:invalid</code>, <code>:out-of-range</code>, or empty-but-<code>:required</code> form element
+    between the time the user has attempted to submit the form
+    and before the user has interacted again with the form element.
+    User-agents may allow it to match such elements at other times,
+    as would be appropriate for highlighting an error to the user.
+    For example, a UA may choose to have <code>:user-error</code> match
+    an <code>:invalid</code> element once the user has typed some text into it
+    and changed the focus to another element,
+    and to stop matching only after the user has successfully corrected the input.
+
+  <div class='example'>
+    <p>
+      For example, the input in the following document fragment
+      would match <code>:invalid</code> as soon as the page is loaded
+      (because it the initial value violates the max-constraint),
+      but it won't match <code>:user-error</code> until the user significantly interacts with the element,
+      or attempts to submit the form it's part of.
+
+    <pre><!--
+    -->&lt;form>&#xa;<!--
+    -->  &lt;label>&#xa;<!--
+    -->    Volume:&#xa;<!--
+    -->    &lt;input name='vol' type=number min=0 max=10 value=11>&#xa;<!--
+    -->  &lt;/label>&#xa;<!--
+    -->  ...&#xa;<!--
+    -->&lt;/form>&lt;/pre>
+  </div>
+
+<!--
+  <p class="issue">
+    If it's necessary to distinguish between omitted and invalid values,
+    <code>:user-invalid</code> and <code>:user-omitted</code> could be used.
+-->
+
+  <p class="issue">
+    What parts of <a href="https://developer.mozilla.org/en-US/docs/CSS/:-moz-ui-invalid">:-moz-ui-invalid description</a> do we want to spec here?
+    Or put as examples?
+
+  <p class="issue">
+    There was a suggestion to have a <code>:user-interacted</code> pseudo-class
+    instead of or in addition to this one.
+    It's unclear what the criteria would be for matching it, however.
+    In particular, it seems unlikely to be a replacement of this one if form validation of an untouched form control is not part of the criteria.
+
 <h3 id="rw-pseudos">
 The mutability pseudo-classes <code>:read-only</code> and <code>:read-write</code></h3>
 
