I try to make a space after 4 digits when entering a credit card number. For example: 0000 0000 0000 0000 I am using vue js.I have seen examples but with jquery and I don't want to use jquery.

Thank you for help

<!--template -->
<div>
  <div>
    <p>Numéro de carte</p>
    <input class="numeroCarte" type="tel" name="numeroCarte" placeholder="Saisissez votre numéro de carte " maxlength="19" pattern="\d*"><i class="fas fa-credit-card"></i>
  </div>
  <div>
    <p>Date d'expiration</p>
    <input type="tel" name="expiration" pattern="\d*" maxlength="7" placeholder="MM / AA">
  </div>
  <div>
    <p>CVV</p>
    <input type="tel" name="cvv" pattern="\d*" maxlength="4" placeholder="CVV">
  </div>
</div>
<!-- /template -->

I try to make a space after 4 digits when entering a credit card number. For example: 0000 0000 0000 0000 I am using vue js.I have seen examples but with jquery and I don't want to use jquery.

Thank you for help

<!--template -->
<div>
  <div>
    <p>Numéro de carte</p>
    <input class="numeroCarte" type="tel" name="numeroCarte" placeholder="Saisissez votre numéro de carte " maxlength="19" pattern="\d*"><i class="fas fa-credit-card"></i>
  </div>
  <div>
    <p>Date d'expiration</p>
    <input type="tel" name="expiration" pattern="\d*" maxlength="7" placeholder="MM / AA">
  </div>
  <div>
    <p>CVV</p>
    <input type="tel" name="cvv" pattern="\d*" maxlength="4" placeholder="CVV">
  </div>
</div>
<!-- /template -->

• javascript
• vue.js
• vuejs3

• unfortunately, not all cards have a space between every 4 numbers, nor are they the same length, your need to do more validation than just check for digits, here is an example codesandbox.io/s/vue-payment-form-6mhs3 – Lawrence Cherone Commented Jul 15, 2021 at 18:37

4 Answers 4

in Vue2, filters are designed for this kind of purpose.

const app = new Vue({
  el: '#app',
  data(){
    return {
      cardNumber: '' 
    } 
  },
  filters: {
    formatCardNumber(value){
      return value ? value.match(/.{1,4}/g).join(' ') : '';
    } 
  },
  methods: {
    updateValue(e){
       this.cardNumber = e.target.value.replace(/ /g,'');
    }
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
  <input :value="cardNumber | formatCardNumber" @input="updateValue"/>
</main>

In Vue3, you can use puted to replace it. Filters are removed from Vue 3.0 and no longer supported.

Vue.createApp({
      data(){
        return {
          cardNumber: '' 
        } 
      },
      puted: {
        formatCardNumber(){
          return this.cardNumber ? this.cardNumber.match(/.{1,4}/g).join(' ') : '';
        } 
      },
      methods: {
        updateValue(e){
           this.cardNumber = e.target.value.replace(/ /g,'');
        }
      }
    }).mount('#app')

<script src="https://unpkg./vue@next"></script>
<main id="app">
  <input :value="formatCardNumber" @input="updateValue"/>
</main>

I think the easiest way to give your pattern to input in Vuejs is to using vue-the-mask

for example, you can use this pattern for bank account:

...

<div>
 <label>Bank Account</label>
 <the-mask
  v-model="bankAccount"
  :mask="['###-#', '####-#', '#####-#', '######-#']"
 />
</div>

...

I guess your input for card is connected to data object:

data() {
  return {
    card: ''
  }
}

and in template with v-model, you can add event listener for keyup:

<input v-model="card" @keyup="formatCard" class="numeroCarte" type="tel" name="numeroCarte" placeholder="Saisissez votre numéro de carte " maxlength="19" pattern="\d*"><i class="fas fa-credit-card"></i>

and make method :

methods: {
  formatCard() {
    let nn = this.card;
    (nn.length - (nn.split(" ").length - 1)) % 4 === 0 ? this.card += ' ' : ''
  }
}

In method on every keyup event you check if length of the text entered (without empty spaces) in input for card is divisible by 4.

 const app = new Vue({
       el: '#app',
         data(){
          return {
           cardNumber: '' 
           } 
          },
        filters: {
           formatCardNumber(value){
               return value ? (value.replace(/ /g, '')).match(/.{1,4}/g).join(' ') : '';
           } 
         },
         methods: {
          isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
                evt.preventDefault();
            } else {
                return true;
            }
        },
            updateValue(e){
               if (e.target.value.trim() != "") {
                   this.cardNumber = (e.target.value.replace(/ /g, '')).match(/.{1,4}/g).join(' ')
                } else {
                   this.cardNumber = ""
                }
            }
         }
         })

#app {
display: flex;
    flex-direction: column;
}
#app label{ 
height: 20px;
        font-size:15px;
        color:green;
}

      <script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"> 
      </script>
      <main id="app">
         <label>{{cardNumber}}</label>
         <input placeholder="Enter Number Card" :value="cardNumber | formatCardNumber" @input="updateValue" @keypress="isNumber($event)"/>
      </main>