title: How to inject customized validation on bootstrap form field
body: <p>I use bootstrap in my html form as below. It has a user name input field with a simple validation rule which is length must between 1 and 16 characters. I wonder how I can put more validation rules on this field. For example, I want to check the username must not start with a number and doesn't include special characters like <code>* # @</code> etc. I am fine if it requires some jquery code. But I don't know how to inject the validation logic and make it works wit the <code>with-errors</code> div.</p>
  
  <pre><code>&lt;div class="form-group"&gt;
                &lt;label for="user-username-input"&gt;User Name&lt;/label&gt;
                &lt;input type="text" class="form-control" id="user-username-input" placeholder="User Name" maxlength="16" data-minlength="1" data-error="Required" required&gt;
                &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>