country-phone-validator

Country-code aware phone number input. Select a country (e.g. India, +91) and the input automatically:

• Limits typing to that country's digit length (India → 10 digits)
• Blocks non-numeric characters (letters, symbols) in real time
• Blocks further typing once the max digit count is reached
• Shows an inline error if the number is incomplete or too long
• Works via a plain <script> tag or as an npm module (Node/bundler)

Install

npm install country-phone-validator

Usage (Node / Webpack / Vite / bundler)

const { initPhoneInput } = require("country-phone-validator");
// or: import { initPhoneInput } from "country-phone-validator";

const phone = initPhoneInput({
  selectId: "country",   // <select> element id
  inputId: "phone",      // <input> element id
  errorId: "phoneError", // optional: element to show error text in
  defaultCountry: "IN",  // optional, default "IN"
  onChange: (state) => {
    // state = { valid, value, dialCode, e164 }
    console.log(state);
  },
});

// On form submit:
if (phone.isValid()) {
  console.log(phone.getValue()); // e.g. "+919876543210"
}

Usage (plain HTML, no bundler)

<select id="country"></select>
<input id="phone" type="text" />
<div id="phoneError"></div>

<script src="node_modules/country-phone-validator/dist/country-phone-validator.umd.js"></script>
<script>
  PhoneInputValidator.initPhoneInput({
    selectId: "country",
    inputId: "phone",
    errorId: "phoneError",
  });
</script>

HTML structure needed

Just two elements — the library builds the country <option>s for you:

<select id="country"></select>
<input id="phone" type="text" />
<div id="phoneError"></div>

Styling hooks

The input gets these classes automatically so you can style valid/invalid states:

.phone-input-error { border-color: #e11d48; }
.phone-input-valid { border-color: #16a34a; }

API

initPhoneInput(options)

Returns a PhoneInput instance.

| Option | Type | Required | Description | |---|---|---|---| | selectId | string | HTMLElement | yes | Country <select> element or its id | | inputId | string | HTMLElement | yes | Phone number <input> element or its id | | errorId | string | HTMLElement | no | Element to display the error message | | defaultCountry | string | no | ISO code to preselect (default "IN") | | countries | array | no | Override the built-in country list | | onChange | function | no | Called on every change with { valid, value, dialCode, e164 } |

Instance methods

• .isValid() → boolean — run validation manually (e.g. on submit)
• .getValue() → string — full number with dial code, e.g. +919876543210

Adding more countries

Edit src/countries.js (or pass your own list via the countries option):

{ name: "India", iso: "IN", dialCode: "91", digits: 10, flag: "🇮🇳" }

digits can be a single number or [min, max] for countries with variable-length numbers.

License

MIT