DEV Community

Cover image for Laravel 8 - Input live formatting and validation with Livewire
Darius Dauskurdis
Darius Dauskurdis

Posted on

9 3

Laravel 8 - Input live formatting and validation with Livewire

Sometimes for better user experience need something interactive, something that could guide user in filling form with data. Let's say dates, credit cards numbers, bank accounts, special codes and so on. Each of them has special format. For example, let's take Norwegian bank account. String format must be xxxx.xx.xxxxx
Let's add simple input and error elements in livewire blade file:

<input type="text" wire:model="bank_account" wire:change="formatBankAccount"  wire:keyup="formatBankAccount"><br />
@error('bank_account') <span class="text-red-500">{{ $message }}</span>@enderror
Enter fullscreen mode Exit fullscreen mode

With livewire actions change and keyup we will call method formatBankAccount to format our input in real time.
In Livewire component file let's add method formatBankAccount:

public function formatBankAccount(){
    $bank_account = $this->bank_account;
    $bank_account = preg_replace('/[^0-9]+/', '', $bank_account);
    $bank_account = substr($bank_account, 0, 11);
    $length = strlen($bank_account);
    $formatted = "";
    for ($i = 0; $i < $length; $i++) { 
        $formatted .= $bank_account[$i];
        if($i == 3 || $i == 5){
            $formatted .= ".";
        }
    }
    $this->bank_account = $formatted;
}
Enter fullscreen mode Exit fullscreen mode

And after submit form, we need to add validation.

$niceNames = [
    'bank_account' => 'Norwegian bank account',
];
$fields_validation = [
    'bank_account' => 'required|regex:/^[0-9]{4}\.[0-9]{2}\.[0-9]{5}$/'
];
$this->validate($fields_validation, null, $niceNames);
Enter fullscreen mode Exit fullscreen mode

So this example can be easily adjusted to any kind of string format like date xxxx-xx-xx, bank card number xxxx-xxxx-xxxx-xxxx and other.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (1)

Collapse
 
mzhasan2016 profile image
mzhasan2016

Really excellent tutorial. Learned a lot from it. Thanks a lot.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay