title: HTML5 allow only US phone number?
body: <p>I have three different input fields for the phone numbers. Each field should only allow US phone number format. Here is example: </p>
  
  <pre><code>(564) 332-9088 //allowed format.
  </code></pre>
  
  <p>User should be able to enter phone number only in the format I have above in example. So first three digits should be in the braces <code>()</code> then space (can be ignored) followed with 3 digits and then <code>-</code> dash and last four digits. I have created pattern regex but that won't require <code>()</code>. User can enter phone number in this format as well <code>336-678-8999</code> that should not be allowed. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="testFrm" id="testFrm" method="POST" action="#"&gt;
    &lt;label for="wphone"&gt;Work Phone:&lt;/label&gt;
    &lt;input type="tel" name="phoneW" id="phoneW" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" maxlength="14" title="US based Phone Number in the format of: (123) 456-7890" placeholder="(xxx) xxx-xxxx" required /&gt;
    &lt;span&gt;&lt;input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /&gt;&lt;/span&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If anyone knows how I can adjust my code to accept only <code>(xxx) xxx-xxxx</code> please let me know or if you have better way to approach this problem. Thank you.</p>