CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marius
Marius

Reputation: 1281

How to change the format of a card number for input?

I have this sample:

link

CODE HTML:

<input type="text" name="card_number" id="card_number" class="disbaled_cc required-input valid" maxlength="16" placeholder="xxxx-xxxx-xxxx-xxxx">

CODE JS:

function cardFormat(){
    var format_card = $(this).val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4");
    if ($(this).val() == '' || $(this).val().match(format_card) || $(this).val().length == 0) {
        console.log("invalid");
    }else{
        console.log("valid");
    }
}

$("#card_number").on('blur change', function () {
        cardFormat();
    });

I want to arrange what the user types in the input in the following format

For example, if the user types so to reinstate the next form:

1234567891091234 ---> 1234-5678-9109-1234

If the user exists and write the correct form,to stay that way

1234-5678-9109-1234 ---> 1234-5678-9109-1234

In this case, 19 characters (a card number should have a maximum of 16). How can we solve this problem?

If you have not understood something, please tell me and I will come back with more information.

You please tell me what is wrong with my function?

Thanks in advance!

Upvotes: 0

Views: 2913

Answers (3)

GMKHussain
GMKHussain

Reputation: 4661

const numberFormatter = (value, splitLimit, separator='-') => {
  const regExRule = RegExp(String.raw`(.{${splitLimit}})`, 'g')
  const formatted = value.replace(regExRule, `$1${separator && separator}`);
  return formatted
}


console.log( "With space 👉 ",
  numberFormatter("44771133778855", 5, ' ')
)

console.log("With - 👉 ",
  numberFormatter("44771133778855", 4, '-')
)

Upvotes: 0

kaito
kaito

Reputation: 291

Updated: Test it with characters like a-Z or numbers to be valid it. Whitespaces and "-" will be auto-removed.

$('.wrapper').on('input', 'input[name="code"]', formatCode);

function formatCode() {

  var $input = $(this);
  var $check = $input.parent().find('.check');
  
  $input.val($input.val().replace(/ /g, '')); // removes all whitespaces
  $input.val($input.val().replace(/-/g, '')); // removes all typed dashes
  $input.val($input.val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4")); // your validation
  var check = $input.val().match(/-/g) || [];  
  
  if($input.val().length === parseInt($input.attr('maxlength')) && check.length === 3) {
  	$check.html("valid");
  	return false;
  }
  
  $check.html('invalid'); 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <p>
    Our goal: 1111-1111-1111-1111<br>
  </p>
  <input name="code" maxlength="19">
  <span class="check"></span>
</div>

Upvotes: 0

Jai
Jai

Reputation: 74738

The problem is $(this) which is not the element you think, that is window and you are not assigning new value.

Change to this: 

function cardFormat() {
  if ($(this).val().length > 4 && $(this).val().indexOf('-') === -1) {
    var format_card = $(this).val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4");
    $(this).attr('maxlength', 16);
    $(this).val(format_card);
    if ($(this).val() == '' ||
      $(this).val().match(format_card) ||
      $(this).val().length == 0) {
      console.log("invalid");
    } else {
      console.log("valid");
    }
  }else{
    $(this).attr('maxlength', 19);
  }
}

$("#card_number").on('input blur', cardFormat); //<--use the function as a callback.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="card_number" id="card_number" class="disbaled_cc required-input valid" maxlength="16" placeholder="xxxx-xxxx-xxxx-xxxx">

Another way is to pass the element in the function: 

function cardFormat($el) { // <---get the element here $el is referring to $(this)
  if ($el.val().length > 4 && $el.val().indexOf('-') === -1) {
    var format_card = $el.val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4");
    $el.attr('maxlength', 16);
    $el.val(format_card);
    if ($el.val() == '' ||
      $el.val().match(format_card) ||
      $el.val().length == 0) {
      console.log("invalid");
    } else {
      console.log("valid");
    }
  } else {
    $el.attr('maxlength', 19);
  }
}

$("#card_number").on('blur change', function() {
  cardFormat($(this)); // <----pass the element here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="card_number" id="card_number" class="disbaled_cc required-input valid" maxlength="16" placeholder="xxxx-xxxx-xxxx-xxxx">

Upvotes: 4

Related Questions