title: Displaying HTML5 validation message for custom checkbox
body: <p>My sign-up form uses HTML5 validation to validate that required fields have been completed.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-md-offset-3"&gt;
              &lt;form action="https://www.salesforce.com" method="POST" id="signup"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="first_name"&gt;First name&lt;/label&gt;
                      &lt;input id="first_name" maxlength="40" name="first_name" size="20" type="text" class="form-control" required&gt;
                  &lt;/div&gt;
                  &lt;div class="checkbox"&gt;
                      &lt;label&gt;
                          &lt;input id="tou" name="tou" type="checkbox" value="1" required="required"/&gt;
                          I have read and agree to the terms of use.
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;input type="submit" name="submit" class="btn"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've replaced the default checkbox with a custom .svg checkbox using CSS.</p>
  
  <pre><code>input[type=checkbox] {
      display: inline-block;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      visibility: hidden;
  }
  
  input[type=checkbox]:before {
      content: url(/static/img/unchecked.svg);
      visibility: visible;
  }
  
  input[type=checkbox]:checked:before {
      content: url(/static/img/checked.svg);
  }
  </code></pre>
  
  <p>While the HTML5 validation works with other fields, I can't get it to work for the custom checkbox.  I tried the methods shown in <a href="https://stackoverflow.com/questions/28555168/jquery-validation-with-custom-css-checkbox">jQuery validation with custom CSS checkbox</a> without success.  Any ideas?</p>