Last active
February 19, 2026 18:17
-
-
Save abubaker417/0c47cd51a3b26d29bed513153055f502 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Register</title> | |
| <link rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" /> | |
| <style> | |
| /* optional: make input wider for country flag */ | |
| #phone { | |
| width: 250px; | |
| padding-left: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| @if ($errors->any()) | |
| <div style="color:red"> | |
| {{ $errors->first() }} | |
| </div> | |
| @endif | |
| @if(session('success')) | |
| <p style="color:green">{{ session('success') }}</p> | |
| @endif | |
| <form method="POST" action="{{ route('register.store') }}"> | |
| @csrf | |
| <label>Phone Number:</label><br> | |
| <input id="phone" type="tel" name="phone" required> | |
| <br><br> | |
| <button type="submit">Submit</button> | |
| </form> | |
| <!-- intl-tel-input scripts --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"></script> | |
| <!-- Inputmask --> | |
| <script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js"></script> | |
| <script> | |
| const phoneInput = document.querySelector("#phone"); | |
| // Initialize intl-tel-input | |
| const iti = window.intlTelInput(phoneInput, { | |
| initialCountry: "pk", | |
| nationalMode: true, | |
| autoPlaceholder: "aggressive", | |
| separateDialCode: false, | |
| dropdownContainer: document.body, // improves dropdown speed | |
| utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js" | |
| }); | |
| // Apply Inputmask dynamically based on placeholder | |
| function applyMask() { | |
| const placeholder = phoneInput.getAttribute("placeholder"); | |
| if (!placeholder) return; | |
| let mask = placeholder.replace(/\d/g, "9"); // replace numbers with 9 for Inputmask | |
| Inputmask({ | |
| mask: mask, | |
| placeholder: "_", | |
| showMaskOnHover: false, | |
| clearIncomplete: false | |
| }).mask(phoneInput); | |
| } | |
| // Initial mask | |
| applyMask(); | |
| // Update mask when country changes | |
| phoneInput.addEventListener("countrychange", function() { | |
| // Slight delay needed for intl-tel-input to update placeholder | |
| setTimeout(() => { | |
| applyMask(); | |
| }, 50); | |
| }); | |
| // Restrict typing extra digits beyond placeholder | |
| phoneInput.addEventListener("input", function() { | |
| const maxLength = phoneInput.getAttribute("maxlength"); | |
| if (maxLength && this.value.length > maxLength) { | |
| this.value = this.value.slice(0, maxLength); | |
| } | |
| }); | |
| // On submit, validate number | |
| document.querySelector("form").addEventListener("submit", function(e) { | |
| // Use libphonenumber validation | |
| if (!iti.isValidNumber()) { | |
| e.preventDefault(); | |
| alert("Please enter a valid phone number for the selected country."); | |
| return false; | |
| } | |
| // Save formatted international number | |
| phoneInput.value = iti.getNumber(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| | Country | Example Number (National) | E.164 / International Format | | |
| | ----------------------- | ------------------------- | ---------------------------- | | |
| | **Pakistan (PK)** | 0300 1234567 | +923001234567 | | |
| | **Pakistan (PK)** | 0320 7361536 | +923207361536 | | |
| | **United States (US)** | (201) 555-0123 | +12015550123 | | |
| | **United States (US)** | 415-555-2671 | +14155552671 | | |
| | **United Kingdom (GB)** | 07123 456789 | +447123456789 | | |
| | **United Kingdom (GB)** | 020 7946 0958 | +442079460958 | | |
| | **India (IN)** | 09123 456789 | +919123456789 | | |
| | **India (IN)** | 080 1234 5678 | +918012345678 | | |
| | **Canada (CA)** | (416) 555-0142 | +14165550142 | | |
| | **Australia (AU)** | 0412 345 678 | +61412345678 | | |
| | **Germany (DE)** | 0151 23456789 | +4915123456789 | | |
| | **France (FR)** | 06 12 34 56 78 | +33612345678 | | |
| | **Italy (IT)** | 333 1234567 | +393331234567 | | |
| | **Japan (JP)** | 090-1234-5678 | +819012345678 | | |
| | **Brazil (BR)** | 11 91234-5678 | +5511912345678 | | |
| | **South Africa (ZA)** | 082 123 4567 | +27821234567 | | |
| | **Palau (PW)** | 4567890 | +6804567890 | | |
| | **Palau (PW)** | 6296789 | +6806296789 | | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment