MaskedPhoneInput

Installation

npm install @apimediaru/masked-phone-input

Basic usage

Create input element.

<input id="phone" type="tel" name="phone" data-masked-phone-input>

Import library and create new MaskedPhoneInput instances.

import { createMaskedInput, validate } from '@apimediaru/masked-phone-input';

// Bind MaskedPhoneInput instances
createMaskedInput('[data-masked-phone-input]');

const formEl = document.querySelector('form');
formEl.addEventListener('submit', (event) => {
  event.preventDefault();
  
  const phoneInputEl = form.querySelector('[name="phone"]');
  
  if (phoneInputEl && !validate(phoneInputEl)) {
    alert('Bad phone number!');
    return;
  }
  
  // Further submit logic
});

API

constructor arguments

new MaskedInput(el: HTMLInputElement, formatter: MaskedFormatter, validator: MaskedValidator): MaskedInput

Library core class, you can import it from the package, but do not use it directly with new operator, use factory instead.

import { MaskedInput } from '@apimediaru/masked-phone-input';

factory

createMaskedInput(el: HTMLInputElement | string, options?: string | MaskedLocalization): MaskedInput | MaskedInput[]

Used to create a new MaskedInput instance.

You can directly pass the HTMLInputElement and create a new instance for target input.

import { createMaskedInput } from '@apimediaru/masked-phone-input';

const instance = createMaskedInput(document.querySelector('[name="phone"]'));

Other usage is passing the CSS selector as first argument to get an array of MaskedInput instances which met the condition (elements which are not instances of HTMLInputElement are ignored).

import { createMaskedInput } from '@apimediaru/masked-phone-input';

const instances = createMaskedInput('[name="phone"]');

validate

validate(el: HTMLElement | string, locale?: string): boolean

Most of the time you want to validate HTMLInputElement, so just pass it as first argument:

import { validate } from '@apimediaru/masked-phone-input';

const element = document.querySelector('#phone');
console.log(validate(element)); // true / false

Validating elements which are not instance of HTMLInputElement will always return true.

Other case is validating directly value as a string, you can pass such value as first argument and if needed you may also specify locale (default one is used if omitted):

import { validate } from '@apimediaru/masked-phone-input';

console.log(validate('+78001234567')); // true / false

extractInstance

extractInstance(el: HTMLInputElement): IMaskedInput | null

Extract instance attached to provided HTMLInputElement.

import { extractInstance } from '@apimediaru/masked-phone-input';

const element = document.querySelector('#phone');
const instance = extractInstance(element);

extendDefaults

extendsDefaults(obj: GlobalOptions): void

Extend default options.

import { extendDefaults, Locales } from '@apimediaru/masked-phone-input';

extendDefaults({
  locale: Locales.LOCALE_GE,
});

Locales

Locales map.

import { Locales } from '@apimediaru/masked-phone-input';

console.log(Locales);

Instance methods and properties

destroy()

instance.destroy()

Destroy instance.

isValid

instance.isValid

true if value meets validator.

isInvalid

instance.isInvalid

false if value do not meets validator.

Default options

locale

Fallback locale which is used by default. Default: ru