Question

166

Social Security Number input validation

rated 0 times [ 172] [ 6] / answers: 1 / hits: 16631 / 8 Years ago, tue, june 28, 2016, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dantel

Add To Favorites

Follow

Total Points: 7

Total Questions: 102

Total Answers: 97

Location: Saint Lucia

Member since Sat, Jun 6, 2020

4 Years ago

answered 8 Years ago pranav · Accepted Answer

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