Validation

Overview

By default, the Svelte component validates phone numbers by length (sufficient for most use cases — enable usePreciseValidation for stricter matching), surfacing the result through three callback props: onChangeNumber, onChangeValidity, and onChangeErrorCode.

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, onChangeErrorCode fires with 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 onStrictReject callback docs for an example of how to wire one up yourself.

JavaScript

<script>
  import IntlTelInput from "@intl-tel-input/svelte";
  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;
  };

  let number = $state("");
  let isValid = $state(false);
  let errorCode = $state(null);
  let showValidation = $state(false);
  let submitted = $state(false);

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

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

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

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

<form onsubmit={handleSubmit}>
  <label for="phone">Phone number</label>
  <IntlTelInput
    onChangeNumber={handleChangeNumber}
    onChangeValidity={(v) => (isValid = v)}
    onChangeErrorCode={(e) => (errorCode = e)}
    {initialCountryLookup}
    loadUtils={() => import("intl-tel-input/utils")}
    inputProps={{
      id: "phone",
      onblur: () => (showValidation = true),
    }}
  />
  <button type="submit">Submit</button>
  {#if invalidMsg}
    <div class="invalid">{invalidMsg}</div>
  {/if}
  {#if validMsg}
    <div class="valid">{validMsg}</div>
  {/if}
</form>