[Vuejs]-Vuejs format credit card number not working

by

0👍

look like you forgot to account for the spaces of the string? if i understand it right.
If you remove the spaces of the string before anything, won’t that fix the problem?
I made a sample with jquery and html like this at jsfiddle.
https://jsfiddle.net/uwry7xn7/

$( "#input" ).keyup(function(e) {
  //.replace(/\s/g, ''); is for removing spaces
  var str = $(e.currentTarget).val().replace(/\s/g, '');
  var numberChunks = str.match(/.{1,4}/g);
  console.log(numberChunks)
  var result = numberChunks.join(' ');
  console.log(result)
  $(e.currentTarget).val(result)
});

and the jquery does the job.

0👍

try this simple function

in your script:

formatCardNumber(event) {
        let value = event.target.value;
        if(!value) return

        this.cardNumber = value.replaceAll(" ", "")
        .split("")
        .map((v, index) => {
            if(index > 0 && index % 4 == 0 ) {
                return " " + v
            }else {
                return v
            }
        }).join("")
    }

in your html template

<input v-model="cardNumber" @keyup="formatCardNumber($event)" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">

P.S: the cardNumber is in your data function that returns the initial reactive state for the component instance (https://vuejs.org/api/options-state.html#data)

Tip:
for the format of the expiry date (xx/xx) you can use the same function but inside the ‘map’ change the return " " by "/" and modulo 4 by 2

Have a good day 😉

Leave a comment