Validation

Overview

By default, the Vue component validates phone numbers by length (sufficient for most use cases — enable use-precise-validation for stricter matching), surfacing the result through three events: change-number, change-validity, and change-error-code.

Validation respects the allowedNumberTypes option, which is set to ["MOBILE", "FIXED_LINE"] by default, meaning it will only consider those types of numbers as valid.

When a number fails validation, change-error-code emits the error code, which you can then map to your own custom error message — see Show a user-facing error message.

Note: the red/green styling and warning/success icons are not part of the component — in this example they come from Bootstrap form validation.

Note: the toast shown when input is rejected isn't part of the library — see the strict-reject event docs for an example of how to wire one up yourself.

JavaScript

<script setup>
  import { computed, ref } from "vue";
  import IntlTelInput from "@intl-tel-input/vue";
  import "intl-tel-input/styles";

  const initialCountryLookup = async () => {
    const res = await fetch("https://ipapi.co/json");
    const data = await res.json();
    return data.country_code;
  };

  const number = ref("");
  const isValid = ref(false);
  const errorCode = ref(null);
  const showValidation = ref(false);
  const submitted = ref(false);

  const invalidMsg = computed(() => {
    if (!showValidation.value || isValid.value) return null;
    // your code here to map the errorCode to a user-facing message
    return getErrorMessage(number.value, errorCode.value);
  });

  const validMsg = computed(() => {
    const showValid =
      showValidation.value && isValid.value && submitted.value;
    return showValid ? `Full number: ${number.value}` : null;
  });

  const handleChangeNumber = (newNumber) => {
    submitted.value = false;
    number.value = newNumber;
  };

  const handleBlur = () => {
    showValidation.value = true;
  };

  const handleSubmit = () => {
    showValidation.value = true;
    submitted.value = true;
  };
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <label for="phone">Phone number</label>
    <IntlTelInput
      @change-number="handleChangeNumber"
      @change-validity="isValid = $event"
      @change-error-code="errorCode = $event"
      :initial-country-lookup="initialCountryLookup"
      :load-utils="() => import('intl-tel-input/utils')"
      :input-props="{
        id: 'phone',
        onBlur: handleBlur,
      }"
    />
    <button type="submit">Submit</button>
    <div v-if="invalidMsg" class="invalid">{{ invalidMsg }}</div>
    <div v-if="validMsg" class="valid">{{ validMsg }}</div>
  </form>
</template>