title: Social Security Number input validation
body: <p>I have <a href="https://codepen.io/anon/pen/qNrjWe" rel="nofollow noreferrer"><strong>this</strong></a> sample:</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-js lang-js prettyprint-override"><code>function ssnFormat() {
    $("#ssn").on('blur change', function() {
      text = $(this).val().replace(/(\d{3})(\d{2})(\d{4})/, "$3-$2-$4");
      if ($(this).val() == '' || $(this).val().match(text) || $(this).val().length == 0) {
        $(this).removeClass('valid').addClass('invalid');
      } else {
        $(this).removeClass('invalid').addClass('valid');
      }
    });
  }
  
  $("#ssn").on('blur change', function() {
    ssnFormat();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.valid {
    border: 1px solid blue;
  }
  
  .invalid {
    border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input class="required-input" id="ssn" maxlength="9" type="text" name="ssn" placeholder="123-45-6789"&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I want to do these things are:</p>
  <ol>
  <li><p>If I write the following text I want to validate this format <code>123-12-1234</code></p>
  </li>
  <li><p>If I write <code>123456789</code> I want to transform when click outside input in this format</p>
  <p>123-12-1234</p>
  </li>
  </ol>
  <p>I tried to do this by using the function below but don't work</p>
  <pre><code>$(&quot;#ssn&quot;).on(&quot;click&quot;, function() {
          var thisVal = $(this).val();
          var value = thisVal.replace(/[^\/\d]/g,''); //here is a problem
          $(this).val(value);
      });
  </code></pre>
  <p>Can you please help me solve this problem?</p>
  <p>Thanks in advance!</p>