Added :user-error to the validity pseudoclasses, and reworked the wording of the section to make it clearer.

Author: tabatkins

selectors4/Overview.html

@@ -319,8 +319,8 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
       default option pseudo-class ‘<code class=css>:default</code>’</a>
 
      <li><a href="#validity-pseudos"><span class=secno>11.5. </span> The
-      validity pseudo-classes ‘<code class=css>:valid</code>’ and
-      ‘<code class=css>:invalid</code>’</a>
+      validity pseudo-classes: <code>:valid</code>, <code>:invalid</code>,
+      and <code>:user-error</code></a>
 
      <li><a href="#range-pseudos"><span class=secno>11.6. </span> The range
       pseudo-classes ‘<code class=css>:in-range</code>’ and ‘<code
@@ -2701,25 +2701,64 @@ <h3 id=default-pseudo><span class=secno>11.4. </span> The default option
    a selection of pizza toppings for example.
 
   <h3 id=validity-pseudos><span class=secno>11.5. </span> The validity
-   pseudo-classes ’‘<code class=css>:valid</code>’‘<code class=css>
-   and </code>’‘<code class=css>:invalid</code>’‘<code
-   class=css></code></h3>
+   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>
 
-  <p>An element is <code id=valid-pseudo>:valid</code> or <code
-   id=invalid-pseudo>:invalid</code> when its contents or value is,
+  <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>). An element which lacks data
-   validity semantics is neither <code>:valid</code> nor
-   <code>:invalid</code>. This is different from an element which otherwise
-   has no constraints. Such an element would always be <code>:valid</code>.
-   For example, a text input field with no constraints would always be
-   <code>:valid</code>.
+   rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>).
+
+  <p> 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>
 
   <h3 id=range-pseudos><span class=secno>11.6. </span> The range
-   pseudo-classes ’‘<code class=css>:in-range</code>’‘<code
-   class=css> and </code>’‘<code
-   class=css>:out-of-range</code>’‘<code class=css></code></h3>
+   pseudo-classes ‘<code class=css>:in-range</code>’ and ‘<code
+   class=css>:out-of-range</code>’</h3>
 
   <p>The <code id=in-range-psuedo>:in-range</code> and <code
    id=out-of-range-pseudo>:out-of-range</code> pseudo-classes apply only to
@@ -2735,9 +2774,8 @@ <h3 id=range-pseudos><span class=secno>11.6. </span> The range
    "C".
 
   <h3 id=opt-pseudos><span class=secno>11.7. </span> The optionality
-   pseudo-classes ’‘<code class=css>:required</code>’‘<code
-   class=css> and </code>’‘<code class=css>:optional</code>’‘<code
-   class=css></code></h3>
+   pseudo-classes ‘<code class=css>:required</code>’ and ‘<code
+   class=css>:optional</code>’</h3>
 
   <p>A form element is <code id=required-pseudo>:required</code> or <code
    id=optional-pseudo>:optional</code> if a value for it is, respectively,
@@ -2746,15 +2784,16 @@ <h3 id=opt-pseudos><span class=secno>11.7. </span> The optionality
    optional.
 
   <h3 id=user-error-pseudos><span class=secno>11.8. </span> The
-   incorrect-input pseudo-class ’‘<code
-   class=css>:user-error</code>’‘<code class=css></code></h3>
-
-  <p>The <code id=user-error-pseudo>:user-error</code> pseudo-element is
-   intended to represent an input element with incorrect input <em>after</em>
-   the user has interacted with it and attempted to input data into it. The
-   exact rules for when it matches are UA-dependent; however it must match
-   every invalid, out-of-range, or empty-but-required form element between
-   the time the user has attempted to submit the form and before the user has
+   incorrect-input pseudo-class ‘<a href="#user-error-pseudo"><code
+   class=css>:user-error</code></a>’</h3>
+
+  <p>The <a href="#user-error-pseudo"><code
+   id=user-error-pseudo>:user-error</code></a> pseudo-element is intended to
+   represent an input element with incorrect input <em>after</em> the user
+   has interacted with it and attempted to input data into it. The exact
+   rules for when it matches are UA-dependent; however it must match every
+   invalid, out-of-range, or empty-but-required form element between the time
+   the user has attempted to submit the form and before the user has
    interacted again with the form element, and may match such form elements
    at other times.
 
@@ -2763,9 +2802,8 @@ <h3 id=user-error-pseudos><span class=secno>11.8. </span> The
    description</a> do we want to spec here? Or put as examples?
 
   <h3 id=rw-pseudos><span class=secno>11.9. </span> The mutability
-   pseudo-classes ’‘<code class=css>:read-only</code>’‘<code
-   class=css> and </code>’‘<code class=css>:read-write</code>’‘<code
-   class=css></code></h3>
+   pseudo-classes ‘<code class=css>:read-only</code>’ and ‘<code
+   class=css>:read-write</code>’</h3>
 
   <p>An element whose contents are not user-alterable is <code
    id=read-only-pseudo>:read-only</code>. However, elements whose contents
@@ -2791,22 +2829,22 @@ <h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural
    parent. When calculating the position of an element in the list of
    children of its parent, the index numbering starts at 1.
 
-  <h3 id=root-pseudo><span class=secno>12.1. </span> ’‘<code
-   class=css>:root</code>’‘<code class=css> pseudo-class</code></h3>
+  <h3 id=root-pseudo><span class=secno>12.1. </span> ‘<code
+   class=css>:root</code>’ pseudo-class</h3>
 
   <p>The <code>:root</code> pseudo-class represents an element that is the
    root of the document. In HTML 4, this is always the <code>HTML</code>
    element.
 
-  <h3 id=nth-child-pseudo><span class=secno>12.2. </span> ’‘<code
-   class=css>:nth-child()</code>’‘<code class=css> pseudo-class</code></h3>
+  <h3 id=nth-child-pseudo><span class=secno>12.2. </span> ‘<code
+   class=css>:nth-child()</code>’ pseudo-class</h3>
 
   <p>The <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
    pseudo-class notation represents an element that has
    <var>a</var><code>n</code>+<var>b</var>-1 siblings <strong>before</strong>
    it in the document tree, for any positive integer or zero value of
    <code>n</code>, and has a parent element. For values of <var>a</var> and
-   <var>b</var> greater than zero, this effectively divides the element’s
+   <var>b</var> greater than zero, this effectively divides the element's
    children into groups of <var>a</var> elements (the last group taking the
    remainder), and selecting the <var>b</var>th element of each group. For
    example, this allows the selectors to address every other row in a table,

selectors4/Overview.src.html

@@ -1959,17 +1959,53 @@ <h3 id="default-pseudo">
   like a selection of pizza toppings for example.
 
 <h3 id="validity-pseudos">
-The validity pseudo-classes '':valid'' and '':invalid''</h3>
+The validity pseudo-classes: <code>:valid</code>, <code>:invalid</code>, and <code>:user-error</code></h3>
 
-  <p>An element is <code id="valid-pseudo">:valid</code> or
-  <code id="invalid-pseudo">:invalid</code> 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>. This is different from an element which
-  otherwise has no constraints. Such an element would always be
-  <code>:valid</code>. For example, a text input field with no constraints
-  would always be <code>:valid</code>.
+  <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]]).
+
+  <p>
+    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>
+
 
 <h3 id="range-pseudos">
 The range pseudo-classes '':in-range'' and '':out-of-range''</h3>