Social Security Number input validation

Question

I have this sample:

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();
});

.valid {
  border: 1px solid blue;
}

.invalid {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="required-input" id="ssn" maxlength="9" type="text" name="ssn" placeholder="123-45-6789">

What I want to do these things are:

1. If I write the following text I want to validate this format 123-12-1234

2. If I write 123456789 I want to transform when click outside input in this format

   123-12-1234

I tried to do this by using the function below but don't work

$("#ssn").on("click", function() {
        var thisVal = $(this).val();
        var value = thisVal.replace(/[^\/\d]/g,''); //here is a problem
        $(this).val(value);
    });

Can you please help me solve this problem?

Thanks in advance!

Answer 1

Try this

function myFunc() {
   var patt = new RegExp("\d{3}[\-]\d{2}[\-]\d{4}");
   var x = document.getElementById("ssn");
   var res = patt.test(x.value);
   if(!res){
    x.value = x.value
        .match(/\d*/g).join('')
        .match(/(\d{0,3})(\d{0,2})(\d{0,4})/).slice(1).join('-')
        .replace(/-*$/g, '');
   }
}

.valid{
  border:1px solid blue;
}
.invalid{
  border:1px solid red;
}

<input class="required-input" id="ssn" type="text" name="ssn" placeholder="123-45-6789" onBlur = "myFunc()">

Also there is another way to enforce user always enters that pattern -

<input class="required-input" id="ssn" type="text" name="ssn" placeholder="123-45-6789" onBlur = "myFunc()" required pattern="\d{3}[\-]\d{2}[\-]\d{4}">