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

What is the process for executing Selenium IDE scripts in Selenium RC?

Troubleshooting issues with using Laravel's history mode in conjunction with VueJS

Tips for implementing jQuery overlay to display radio buttons in a popup window

Immediately Invoked Function Expression in Javascript

Element not recognized: <my-company-form-extra> - have you properly registered this component?

Avoiding the occurrence of moiré patterns when using pixi.js

What is the process for updating button text upon clicking in Angular?

What is the method for adjusting the width of a v-card based on its height?

Utilizing System.import with Webpack 2 and React for splitting code and managing nested routes

Extracting data on an AngularJS platform by using web scraping techniques

What is the best way to get the latest props in the midst of an async function?

Utilizing GroupBy in RxJs for an Observable of Objects数组

determining the overall page displacement

The button text in Bootstrap 5 is black instead of white as shown in their demo

How can AngularJS apps handle authentication?

Encountering: Unable to break down the property 'DynamicServerError' of 'serverHooks' as it does not have a defined value

What is the best way to include the application version in an Electron project using JavaScript

The selected option in Bootstrap is displayed twice in the Bootstrap modal

What causes the function execution to not be delayed by setTimeout?

Vue.js custom confirmation component failing to open within v-menu