title: HTML5 input form - display span only if error or pattern not matched
body: <p>Would like to handle input form errors using HTML5 and CSS - without JS.</p>
  
  <p>Currently, I have span that is set to invisible, until the input is valid. However, the default state of the input text field is blank, thus invalid, and the span is visible by default.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;input class="form-control" placeholder="#####" 
   name="zip" pattern="\d{5}"  title="Enter valid 5 digit zip" 
   required&gt;&lt;span class="formhelp"&gt;5 digit ZIP required&lt;/span&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.formhelp
     display:none;
     font-size: 70%;
  
  input:invalid + .formhelp
     display:block;
  </code></pre>
  
  <p>The objective is to only display the span if the pattern is invalid after the field loses focus, but not empty as is the default state. </p>