title: HTML Form Field - How to require an input format
body: <p>What I want to do here is require that phone numbers be entered into my HTML form as (XXX) XXX-XXXX and that SS Numbers are entered as XXX-XX-XXXX. Thats it.  </p>
  
  <p>The only reason I am doing this is so that the form submission results are consistent and easy exported to Excel.</p>
  
  <p>I have been told to use Javascript to do this but perhaps I am not advanced enough to understand all the steps in doing that.</p>
  
  <p>Can someone please point me in the right direction here keeping in mind that I am a beginner?</p>
  
  <p>Wow thank you so much Ethan and @suman-bogati!  I am ALMOST there now!  The field now pops an error stating to use the correct format of 555-55-5555.  Thats great.  But no matter what I enter enter into that field the popup persists. I tried 555-55-5555 and also 555555555 and neither are accepted.  Here is the HTML for that field:  </p>
  
  <pre><code>&lt;label&gt;
              Social Security Number:
              &lt;input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
                  title="Expected pattern is ###-##-####" /&gt;
          &lt;/label&gt;
  &lt;/div&gt;
      &lt;script&gt;$('form').on('submit', function(){
          $(this).find('input[name="SocialSecurity"]').each(function(){
          $(this).val() = $(this).val().replace(/-/g, '');
      });
      $(this).find('input[name="ssn"]').each(function(){
          $(this).val() = $(this).val().replace(/-/g, '');
      });
  });&lt;/script&gt;
      &lt;br /&gt;
  </code></pre>