title: How to clear, remove, or reset HTML5 form validation state after "setCustomValidity("...");"?
body: <p>How to clear, remove, or reset HTML5 form validation state after <code>setCustomValidity("...");</code>?</p>
  
  <p>Setting an empty string, <code>setCustomValidity("");</code>, in Firefox and Chrome closes the form validation error message. I do not want to close the form validation error message. I want to reset the validation state so that the next answer can be checked and also to keep the displayed validation error message. If the validation state is not reset, then even the next, correct answer will incorrectly show a validation error message.</p>
  
  <hr>
  
  <p>So somehow, "clear" means "close"?</p>
  
  <blockquote>
    <p>If the argument is the empty string, clears the custom error.</p>
  </blockquote>
  
  <p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api" rel="noreferrer">http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api</a></p>
  
  <hr>
  
  <p>Here is a validation test case:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html dir="ltr" lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"/&gt;
          &lt;title&gt;Validation test case&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="testForm"&gt;
              &lt;input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/&gt;
              &lt;input type="submit" value="OK"/&gt;
          &lt;/form&gt;
  
          &lt;script&gt;
              /*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
              (function ()
              {
                  "use strict";
  
                  var form = null;
                  var answer = null;
  
                  var isCorrectAnswer = function (value)
                  {
                      return (value === "a");
                  };
  
                  var closeValidation = function (element)
                  {
                      // Close the form validation error message if displayed.
                      element.blur();
                      element.focus();
                  };
  
                  var validateForm = function (event)
                  {
                      event.preventDefault();
                      event.stopPropagation();
  
                      var isValidForm = event.target.checkValidity();
                      if (isValidForm)
                      {
                          if (isCorrectAnswer(answer.value))
                          {
                              form.reset();
                              closeValidation(answer);
  
                              console.log("Correct answer.");
                              alert("Correct answer.");
                          }
                          else
                          {
                              console.log("Incorrect answer.");
                              answer.setCustomValidity("Incorrect answer.");
                              answer.checkValidity();
                              //answer.setCustomValidity("");
                          }
                      }
                  };
  
                  window.addEventListener("DOMContentLoaded", function ()
                  {
                      form = document.getElementById("testForm");
                      answer = document.getElementById("answer");
  
                      form.addEventListener("submit", validateForm, false);
                  }, false);
              }());
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Type an incorrect answer, any letters(s) but "a", and press Enter.
  Type the correct answer "a", and press Enter.</p>
  
  <p>Without changes to the test case, the behavior is the same in Opera, Firefox, and Chrome (except the Chrome bugs). The validation error message persists regardless if the answer is correct or incorrect.</p>
  
  <p>Now, after <code>answer.setCustomValidity("");</code> is uncommented, Opera clears the custom validation error but does not close the validation error message, which is what I expect. On the other hand, Firefox and Chrome both clear the custom validation error and close the validation error message (bug?).</p>
  
  <hr>
  
  <p><strong>BUG:</strong> Chrome doesn't "checkValidity()" when first invoked.</p>
  
  <p>In Chrome, <code>answer.checkValidity();</code> doesn't show the validation message after the first submit. Subsequent submits show the validation error message.</p>
  
  <p><a href="http://code.google.com/p/chromium/issues/detail?id=95970" rel="noreferrer">http://code.google.com/p/chromium/issues/detail?id=95970</a></p>
  
  <p><strong>BUG:</strong> In Chrome, the validation error message is blanked but not closed when the input is changed.</p>
  
  <p><a href="http://code.google.com/p/chromium/issues/detail?id=95973" rel="noreferrer">http://code.google.com/p/chromium/issues/detail?id=95973</a></p>
  
  <hr>
  
  <p>Opera 11.51 Build 1087</p>
  
  <p>Firefox 6.0.2</p>
  
  <p>Google Chrome 13.0.782.220 m</p>