Form validation

<form id="form" class="demo" novalidate>
  <div class="demo-field">
    <label class="demo-label" for="mobile">Mobile number <span class="demo-muted">· mobiles only</span></label>
    <input id="mobile" required>
    <p id="error" class="demo-error" aria-live="polite"></p>
  </div>
  <button class="demo-btn">Continue</button>
  <p id="done" class="demo-out" hidden></p>
</form>

import { createPhoneInput } from 'https://www.devix.pk/cdn/oss/phone-input@1.2.0/index.js';

const input = document.getElementById('mobile');
const error = document.getElementById('error');
const phone = createPhoneInput(input, { initialCountry: 'pk', allowedTypes: ['mobile'] });

input.addEventListener('blur', () => (error.textContent = input.validationMessage));
document.getElementById('form').addEventListener('submit', (event) => {
  event.preventDefault();
  error.textContent = phone.isValid() ? '' : phone.getValidationMessage() || 'Enter a phone number.';
  const done = document.getElementById('done');
  done.hidden = !phone.isValid();
  done.textContent = `Would submit ${phone.getNumber()}`;
});

@import url('https://www.devix.pk/cdn/oss/phone-input@1.2.0/phone-input.min.css');