title: HTML Pattern, how to prevent number in name fields
body: <p>I'm building a form which will allow users to sign up. The technique that I used is the pattern attribute of HTML. Here is the code for the whole form.</p>
  
  <pre><code>&lt;form id="signupForm" name="signupForm" action="https://www.google.com/" method="POST"&gt;
  
          &lt;fieldset id="signup" title="User Infomation"&gt;
              &lt;legend&gt;User Infomation&lt;/legend&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;label for="firstName"&gt;First Name *&lt;/label&gt;
                      &lt;input type="text" name="firstName" id="firstName" title="Please enter your first name" pattern="[A-Za-z]+" autofocus required placeholder="Please Enter Your First Name" /&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;label for="lastName"&gt;Last Name *&lt;/label&gt;
                      &lt;input type="text" name="lastName" id="lastName" title="Please enter your last name" pattern="[A-Za-z]+" autofocus required placeholder="Please Enter Your Last Name" /&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;label for="username"&gt;Username *&lt;/label&gt;
                      &lt;input type="text" name="username" id="username" title="Please enter your username" pattern="[A-Za-z1-9]+" autofocus required placeholder="Please Enter Your Username" /&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;label for="email"&gt;Email Address *&lt;/label&gt;
                      &lt;input type="email" name="email" id="email" title="Please enter your email address" autofocus required autocomplete="off" placeholder="Please Enter Your Email Address" /&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;label for="password"&gt;Password *&lt;/label&gt;
                      &lt;input type="password" name="password" id="password" title="Please enter your password" autofocus placeholder="Please Enter Your Password"  /&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;label for="passwordConf"&gt;Confirm Password *&lt;/label&gt;
                      &lt;input type="password" name="passwordConf" id="passwordConf"  autofocus title="Please confirm your password" placeholder="Please Confirm Your Password" /&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/fieldset&gt;
  
          &lt;fieldset id="other" class="hidden" title="Other Info"&gt;
              &lt;legend&gt;Other&lt;/legend&gt;
              &lt;ul&gt;
  
                  &lt;li&gt;
                      &lt;input type="checkbox" id="subscribe" name="subscribe" value="yes" /&gt;
                      &lt;label for="subscribe"&gt;Subscribe to our mailing list?&lt;/label&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;input type="checkbox" id="agree" name="agree" value="yes" /&gt;
                      &lt;label for="agree"&gt;I agree to the &lt;a href="#"&gt;Terms and Conditions&lt;/a&gt;&lt;/label&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/fieldset&gt;
  
          &lt;input type="submit" value="Create new account" /&gt;
          &lt;input type="reset" value="Reset" /&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p>When I try entering some number in this field (eg 11111111), I was able to submit the form with no problem. Is there any idea what I have doen wrong?</p>
  
  <p>EDIT: I used the jquery validation plugin to validate entered fields. The script is as follow:</p>
  
  <pre><code>    $(document).ready(function() {
              $("#signupForm").validate({
                  "rules" : {
                      "password": {
                          "minlength" : 8,
                          "required" : true },
                          "passwordConf" : {
                              "equalTo" : "#password"}
                  } //rules
  
          }); //validate
  
      }); //document ready
  </code></pre>
  
  <p>Thanks</p>