title: Using HTML5 Input Pattern to Enforce Valid Hostname
body: <p>I am working with a C++ project on an ESP8266 controller and displaying a captive portal.  The portal itself is created by an external library and somewhat limited with regard to the portal page generated.  I only have the ability to add attributes to the form field which the code creates.  In other words, I have an input field that is generated on the page/portal, and I can modify it with attributes such as <code>pattern</code>, <code>min</code>, <code>max</code>, etc.</p>
  
  <p>I want to allow the user to enter a hostname, and to keep it exceedingly simple and compatible with potentially dated technology, I want to enforce that the hostname begins with an alpha character, must be between 3 and 24 characters, may contain alphanumeric characters and/or a hyphen, and must not end with a hyphen.</p>
  
  <p>Clearly, the <code>pattern</code> attribute is just the thing here.  The problem is I have failed so far to come up with a good working example.  In my example below, it enforces a beginning alpha, and if I enter <em>something</em> it enforces a minimum of 3 characters, but if I enter nothing it accepts it as valid.  I've also not quite figured out how to limit the last character to alphanumeric.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="text" name="hostname"
      pattern="^[a-zA-Z][a-zA-Z0-9-]{2,24}$"
      title="Enter a hostname, 3-14 characters, beginning
      with a letter and containing only alphanumeric
      characters and/or a hyphen.  It must end with an
      alphanumeric."
  &gt;
  </code></pre>
  
  <p>So a few tests which I would like to work correctly are:</p>
  
  <ul>
  <li>a-b (good)</li>
  <li>a12 (good)</li>
  <li>ab- (bad)</li>
  <li>ab (bad)</li>
  <li>1ab (bad)</li>
  </ul>
  
  <p>I'm a little incredulous that my Google-fu has failed me here.</p>