Laravel Tel Input Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require stojankukrika/laravel-tel-input
   npm install intl-tel-input --save
   

   Publish assets and config:

   php artisan vendor:publish --provider="Stojankukrika\LaravelTelInput\TelInputServiceProvider" --tag="tel-input-config"
   npm run dev
   

2. First Use Case: Add the directive to a Blade form:

   <x-tel-input name="phone" id="phone" />
   

   This renders a phone input with default country (US) and auto-formatting.

3. Livewire Integration: For Livewire 3, use the component:

   <livewire:tel-input name="phone" wire:model="phoneNumber" />
   

Implementation Patterns

Blade Integration

• Basic Form Handling:

  <form method="POST" action="/submit">
      @csrf
      <x-tel-input name="phone" id="phone" required />
      <button type="submit">Submit</button>
  </form>
  

  • Automatically formats input based on selected country.
  • Validates via Laravel’s built-in validation rules (e.g., required|phone:US).

• Custom Countries:

  <x-tel-input
      name="phone"
      id="phone"
      defaultCountry="GB"
      separateDialCode="true"
  />
  

Livewire Workflows

• Livewire 2/3:

  // Livewire Component
  public $phoneNumber;
  
  public function mount() {
      $this->phoneNumber = null;
  }
  
  public function rules() {
      return ['phoneNumber' => 'required|phone:GB'];
  }
  

  <!-- Blade View -->
  <livewire:tel-input
      name="phoneNumber"
      wire:model="phoneNumber"
      defaultCountry="GB"
  />
  

• Dynamic Country Sync:

  // Livewire Component
  public $countryCode;
  
  public function updatedCountryCode($value) {
      $this->emit('telInputUpdateCountry', $value);
  }
  

  <livewire:tel-input
      name="phoneNumber"
      wire:model="phoneNumber"
      wire:ignore
      @this.countrysync="this.countryCode = $event.target.value"
  />
  

Validation

• Laravel Validation Rules:

  $validated = $request->validate([
      'phone' => 'required|phone:US,CA,GB',
  ]);
  

  • Supports country-specific validation (e.g., phone:US).
  • Extend with custom rules via app/Providers/AppServiceProvider:

    use Stojankukrika\LaravelTelInput\Rules\Phone;
    
    Validator::extend('phone', function ($attribute, $value, $parameters, $validator) {
        return (new Phone($parameters))->validate($value);
    });
    

Gotchas and Tips

Pitfalls

1. Asset Loading:

   • Ensure intl-tel-input CSS/JS are included. Run npm run dev after installation.
   • If using Laravel Mix/Vite, manually add:

     // resources/js/app.js
     import 'intl-tel-input/build/js/intlTelInput';
     

2. Livewire 2 vs. 3:

   • Livewire 2 uses wire:model.defer for async updates:

     <livewire:tel-input wire:model.defer="phoneNumber" />
     

   • Livewire 3 requires explicit wire:ignore for dynamic updates:

     <livewire:tel-input wire:ignore @this.countrysync="..." />
     

3. Validation Quirks:

   • Default validation assumes E.164 format. For custom formats, extend the Phone rule:

     // app/Rules/CustomPhone.php
     use Stojankukrika\LaravelTelInput\Rules\Phone as BasePhone;
     
     class CustomPhone extends BasePhone {
         public function validate($attribute, $value) {
             return preg_match('/^\+1\d{10}$/', $value); // Example: US-only
         }
     }
     

Debugging

• Console Errors:

  • Check for missing intl-tel-input assets or conflicts with other JS libraries (e.g., jQuery).
  • Clear cached views: php artisan view:clear.

• Country Data:

  • Customize available countries via config (config/tel-input.php):

    'countries' => ['US', 'GB', 'DE'], // Whitelist
    'excludeCountries' => ['FR'],     // Blacklist
    

Extension Points

1. Custom Templates: Override Blade directives in resources/views/vendor/tel-input:

   <!-- resources/views/vendor/tel-input/input.blade.php -->
   <input type="tel" class="custom-phone-input" wire:model.defer="{{ $name }}">
   

2. API Integration: Use the underlying JS plugin directly for non-Laravel frontend logic:

   const input = document.querySelector('#phone');
   const iti = window.intlTelInput(input, {
       initialCountry: 'auto',
       geoIpLookup: function(callback) {
           fetch('/api/country')
               .then(res => res.json())
               .then(data => callback(data.countryCode));
       }
   });
   

3. Testing: Mock the component in PHPUnit:

   $this->view->composer('*', function ($view) {
       $view->with('telInputConfig', ['defaultCountry' => 'US']);
   });