In this post, we’ll seen how to implement phone number validation, formatting and model casting in laravel. We’ll use the propaganistas/laravel-phone package to achieve this thing.
At first, we need to setup fresh laravel application, then install the package,
composer require propaganistas/laravel-phoneThen, add an extra translation in every validation.php language file,
'phone' => 'The :attribute field must be a valid number.',Validation
Validation setup is looking very straightforward according to package docs. Just use phone keyword to validation rules.
'phonefield' => 'phone:US,BD',Sometimes, we need to validate the phone number value according to dynamic country selection.
'phonefield' => 'phone:custom_country_field',
'custom_country_field' => 'required_with:phonefield',Attribute Casting
public $casts = [
'phone' => RawPhoneNumberCast::class.':country_field',
// or,
// 'phone' => E164PhoneNumberCast::class.':BD',
];Formatting
$phone = new PhoneNumber('012/34.56.78', 'BE');
$phone->format($format); // See libphonenumber\PhoneNumberFormat
$phone->formatE164(); // +3212345678
$phone->formatInternational(); // +32 12 34 56 78
$phone->formatRFC3966(); // +32-12-34-56-78
$phone->formatNational(); // 012 34 56 78
// Formats so the number can be called straight from the provided country.
$phone->formatForCountry('BE'); // 012 34 56 78
$phone->formatForCountry('NL'); // 00 32 12 34 56 78
$phone->formatForCountry('US'); // 011 32 12 34 56 78
// ...moreYou’ll find more formatting options and helper functions in docs
Livewire Form Validation
Here is a sample Livewire component class,
<?php
namespace App\Livewire;
use App\Models\User;
use Livewire\Attributes\Validate;
use Livewire\Component;
class Home extends Component
{
#[Validate(['required', 'phone:country'])]
public $phone = "";
#[Validate(['required_with:phone'])]
public $country = "BD";
public function render()
{
return view('livewire.home');
}
public function updatedCountry()
{
$this->validateOnly('phone');
}
public function submit()
{
$this->validate();
$user = User::first();
$user->update([
'phone' => $this->phone
]);
dd($user->phone);
}
}View
<div class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950">
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md w-full">
<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">Welcome Back!</h1>
<form method="POST" wire:submit="submit">
<div class="mb-4">
<label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Country
</label>
<select id="country"
class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
placeholder="+880...." required wire:model.live.debounce.150ms="country">
<option value="BD">Bangladesh</option>
<option value="US">USA</option>
</select>
@error('country')
<span class="text-xs text-red-600 dark:text-red-300">{{ $message }}</span>
@enderror
</div>
<div class="mb-4">
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Phone number
</label>
<input type="text" id="phone"
class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
placeholder="+880...." required wire:model.live.debounce.150ms="phone">
@error('phone')
<span class="text-xs text-red-600 dark:text-red-300">{{ $message }}</span>
@enderror
</div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Submit</button>
</form>
</div>
</div>Demo
Thanks.
Leave a Comment