Social Security Number input validation
<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>