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:

If I write the following text I want to validate this format 123-12-1234
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!

WitVault · Accepted Answer · 2016-06-28T12:11:54.400

11

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}">

edited Jun 28 '16 at 12:11

answered Jun 28 '16 at 11:48

WitVault

23,445
19
103
133

to me it does not work, you can put pen please link to code if you work? – John Smith Jun 28 '16 at 11:52
Unexpected token . – John Smith Jun 28 '16 at 11:54
@JohnSmith there's an superflous `.` in the code after `thisVal`, I've submitted an edit. – Mike Scotty Jun 28 '16 at 12:00
please try to put in the correct format first.Ex: 123-12-1234 – John Smith Jun 28 '16 at 12:01
ok but you remove character limit ... user is not allowed to write more characters than needed – John Smith Jun 28 '16 at 12:20
- also counted in your 9 length limit – WitVault Jun 28 '16 at 12:26
1

I had to escape the backslashes to get this working. So here is the regex: `new RegExp("\\d{3}[\-]\\d{2}[\-]\\d{4}")` – Raghavendra N Feb 18 '19 at 21:26

score 0 · Answer 2 · answered Feb 10 '18 at 23:03

0

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()">

answered Feb 10 '18 at 23:03

user6368744

1

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Rosário Pereira Fernandes Feb 10 '18 at 23:11

Social Security Number input validation

2 Answers2

Linked