Dynamic Formatting with Vue JS: Enhancing Phone Number Input

Question

Dynamic Formatting with Vue JS: Enhancing Phone Number Input

I am working on a form that includes a phone number input field, and I want the formatting of the number to change to a standard telephone number format as the user types. Can someone provide guidance on how this can be achieved using JavaScript and Vue 3?

My main component is AppointmentForm.vue

<div class="form-control">
    <label class="form-input" for="telNumber">Telephone Number (optional)</label>
        <input v-model="telNumber" 
        :class="{ 'input-error': numberError }"
        @input="numberFormatting"
        id="telNumber"
        type="tel"
        placeholder="Enter your telephone number"
        class="field-input">
    <div v-if="numberError" class="validation-error">
        <span class="error-message">Please enter a valid number</span>
    </div>
</div>

Although I have a basic validation function in my script to validate the number, it may not be entirely relevant for this specific case.

setup(props) {
    const telNumber = ref("");
    const numberError = ref(false);

    // Run validate form to check whether the data is added
    function validateForm() {
        if (telNumber.value !== '') {
            const numbers = /^[0-9]+$/;
            if(!telNumber.value.match(numbers)) {
                numberError.value = true;
            } else {
               numberError.value = false;
            }
        } else {
            numberError.value = false;
        }
        if (numberError.value) {
            AnalyticsHandler.userSendForm(true);
        } else if (!numberError.value) {    
            sendEmail();
        } 
    }

javascript vue.js number-formatting vuejs3 vue-composition-api

Answer 1

Answer №1

If you're looking to incorporate phone number formatting in your Vue3 project, consider using the maska library.

In my experience, implementing this feature from scratch can be time-consuming and complex. That's why opting for a pre-built library like Maska is often more efficient.

If you prefer creating your own solution, you can achieve the same functionality by capturing input/change events and manipulating the value using regex substitution. The example provided below demonstrates how to format a phone number in vanilla JavaScript, which can easily be adapted for a Vue3 application:

function formatPhone(str) {
  return str
    .replace(/\D/g, '')
    .replace(/^(\d{1})(\d{3})(\d{3})(\d{4})/g, "$1 ($2) $3 $4")
    .replace(/^(\d{1})(\d{3})(\d{3})(\d*)/g, "$1 ($2) $3 $4")
    .replace(/^(\d{1})(\d{3})(\d{1,3})/g, "$1 ($2) $3")
    .replace(/^(\d{1})(\d{1,3})/g, "$1 ($2")
    .substring(0, 16)
    .trim();
}

document.querySelector("#phone").addEventListener("input",
  function onUpdate(e) {
    var pos = e.target.selectionStart - e.target.value.length;
    var formatted = formatPhone(e.target.value);
    if(formatted.length > 0 && formatted.length < 16) {e.target.classList.add('err')}
    else {e.target.classList.remove('err')}
    e.target.value = formatted;
    e.target.selectionStart = pos+ e.target.value.length;
    e.target.selectionEnd = pos+ e.target.value.length;
  }
)

<input id="phone" placeholder="#(###) ### ####">

Update (vue version)

const formatPhone = (str) => str
  .replace(/\D/g, '')
  .replace(/^(\d{1})(\d{3})(\d{3})(\d{4})/g, "$1 ($2) $3 $4")
  .replace(/^(\d{1})(\d{3})(\d{3})(\d*)/g, "$1 ($2) $3 $4")
  .replace(/^(\d{1})(\d{3})(\d{1,3})/g, "$1 ($2) $3")
  .replace(/^(\d{1})(\d{1,3})/g, "$1 ($2")
  .substring(0, 16)
  .trim();

Vue.createApp({
  data() {
    const numberFormatting = (e)=>telNumber.value = formatPhone(e.target.value);
    const telNumber = Vue.ref('');
    const numberError = Vue.computed(()=>telNumber.value.length > 0 && telNumber.value.length < 16)
    return {telNumber, numberError, numberFormatting}
  },
}).mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <div class="form-control">
    <label class="form-input" for="telNumber">Phone Number (optional)</label>
    <input v-model="telNumber" 
           :class="{ 'input-error': numberError }"
           @input="numberFormatting"
           id="telNumber"
           type="tel"
           placeholder="Enter your phone number"
           class="field-input">
    <div v-if="numberError" class="validation-error">
      <span class="error-message">Please enter a valid number</span>
    </div>
  </div>
</div>

Answer 2

If you're looking to incorporate phone number formatting in your Vue3 project, consider using the maska library.

In my experience, implementing this feature from scratch can be time-consuming and complex. That's why opting for a pre-built library like Maska is often more efficient.

If you prefer creating your own solution, you can achieve the same functionality by capturing input/change events and manipulating the value using regex substitution. The example provided below demonstrates how to format a phone number in vanilla JavaScript, which can easily be adapted for a Vue3 application:

function formatPhone(str) {
  return str
    .replace(/\D/g, '')
    .replace(/^(\d{1})(\d{3})(\d{3})(\d{4})/g, "$1 ($2) $3 $4")
    .replace(/^(\d{1})(\d{3})(\d{3})(\d*)/g, "$1 ($2) $3 $4")
    .replace(/^(\d{1})(\d{3})(\d{1,3})/g, "$1 ($2) $3")
    .replace(/^(\d{1})(\d{1,3})/g, "$1 ($2")
    .substring(0, 16)
    .trim();
}

document.querySelector("#phone").addEventListener("input",
  function onUpdate(e) {
    var pos = e.target.selectionStart - e.target.value.length;
    var formatted = formatPhone(e.target.value);
    if(formatted.length > 0 && formatted.length < 16) {e.target.classList.add('err')}
    else {e.target.classList.remove('err')}
    e.target.value = formatted;
    e.target.selectionStart = pos+ e.target.value.length;
    e.target.selectionEnd = pos+ e.target.value.length;
  }
)

<input id="phone" placeholder="#(###) ### ####">

Update (vue version)

const formatPhone = (str) => str
  .replace(/\D/g, '')
  .replace(/^(\d{1})(\d{3})(\d{3})(\d{4})/g, "$1 ($2) $3 $4")
  .replace(/^(\d{1})(\d{3})(\d{3})(\d*)/g, "$1 ($2) $3 $4")
  .replace(/^(\d{1})(\d{3})(\d{1,3})/g, "$1 ($2) $3")
  .replace(/^(\d{1})(\d{1,3})/g, "$1 ($2")
  .substring(0, 16)
  .trim();

Vue.createApp({
  data() {
    const numberFormatting = (e)=>telNumber.value = formatPhone(e.target.value);
    const telNumber = Vue.ref('');
    const numberError = Vue.computed(()=>telNumber.value.length > 0 && telNumber.value.length < 16)
    return {telNumber, numberError, numberFormatting}
  },
}).mount('#app')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <div class="form-control">
    <label class="form-input" for="telNumber">Phone Number (optional)</label>
    <input v-model="telNumber" 
           :class="{ 'input-error': numberError }"
           @input="numberFormatting"
           id="telNumber"
           type="tel"
           placeholder="Enter your phone number"
           class="field-input">
    <div v-if="numberError" class="validation-error">
      <span class="error-message">Please enter a valid number</span>
    </div>
  </div>
</div>

Answer 3

Answer №2

To find the solution, I utilized the maska method by setting up a watcher on the field's value:

<script setup>
import { watch } from 'vue';
import { mask } from 'maska';

watch(() => details.value.phone_number, () => {
    details.value.phone_number = mask(details.value.phone_number, '###-###-####');
});
</script>

Simply input your data as you normally would and implement the watcher.

Answer 4

To find the solution, I utilized the maska method by setting up a watcher on the field's value:

<script setup>
import { watch } from 'vue';
import { mask } from 'maska';

watch(() => details.value.phone_number, () => {
    details.value.phone_number = mask(details.value.phone_number, '###-###-####');
});
</script>

Simply input your data as you normally would and implement the watcher.

Dynamic Formatting with Vue JS: Enhancing Phone Number Input

Answer №1

Update (vue version)

Answer №2

Similar questions

Encountering a TypeScript error while calling a Vue lifecycle hook method

Why is my node.js react app failing to detect the index.html file?

What is causing this issue? Error: [$compile:nonassign] The expression 'undefined' cannot be assigned! AngularJS 1.5

Creating a Login Form with Node.js and MongoDB

Creating a PDF document with multiple pages using a PHP loop, integrating with AJAX, and utilizing the m

Toggle visibility of column data on button click in a Vue and Laravel application

Real-time File Updates Display with Node.js and Express.js

Remove the color options from the Material UI theme

Using nested ternary operations in React can cause issues with accessing local variables

JavaScript and jQuery are lightning fast, especially when the page is reloaded

Navigating Angular: Discovering Route Challenges in Less Than an Hour

When using mongoose, is it possible to add a new item and retrieve the updated array in one endpoint?

Ways to navigate private property using the App Component in Angular 4

Failure encountered when attempting to load JSON data into datalist

What is the reason behind this strange alert coming from Vue / Vuetify / Vite?

Webpage video stalling due to buffering

Filter a nested array in AngularJS and retrieve the parent object as the result

Switching the checkbox value upon clicking a div element

Utilize and store images based on the individual user's preferences with PlayCanvas

Reactivating a React hook following the execution of a function or within a function in ReactJS