Livewire form validation and submission

Question

in my learning journey to laravel livewire , i've face some difficulties.. here I'm validating a simple form , when i click submit button , it is quickly submit the form without a little delays , how can i delay form submission for a few seconds before displaying success or error message?

    {{-- bind success message --}}
<div>
    @if(session()->has('success'))
        <div class="alert alert-success" id="success-message">
            {{ session('success') }}
        </div>
    @endif

    {{-- form starts --}}
    <form wire:submit.prevent="submitForm">
        <div class="card shadow">
            <div class="card-header">
                <h4 class="card-title fw-bold">Livewire Form Validation </h4>
            </div>                    
            <div class="card-body">                        
                {{-- name --}}
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" wire:model="name" placeholder="Name" aria-describedby="name-error" aria-required="true" @error('name') aria-invalid="true" @enderror class="form-control @error('name') is-invalid @enderror">                            
                    {{-- Display name validation error message --}}
                    @error('name')
                        <span id="name-error" class="text-danger">{{ $message }}</span>
                    @enderror
                </div>                        
                {{-- email --}}
                <div class="form-group my-3">
                    <label for="email">Email</label>
                    <input type="text" id="email" wire:model="email" placeholder="Email" aria-describedby="email-error" @error('email') aria-invalid="true" @enderror class="form-control @error('email') is-invalid @enderror">                            
                    {{-- Display email validation error message --}}
                    @error('email')
                        <span id="email-error" class="text-danger">{{ $message }}</span>
                    @enderror
                </div>                       
                <div class="form-group mb-2">
    <button type="button" wire:click.delay="submit">submit</button>
 
<!---load spinner-->
<div wire:loading>
        <svg>...</svg> 
    </div> 
            </div>
        </div>
    </form>
    {{-- form ends --}}
</div>

    <?php

namespace App\Livewire;

use Livewire\Component;
use Illuminate\Validation\Rule;
use App\Models\Subscription;
use Illuminate\Support\Facades\View;

class SubscriptionForm extends Component
{
    public $name, $email;

    public function submitForm()
    { 
        $validateFields = $this->validate([
            'email' => [
                'required',
                'email',
                Rule::unique('subscriptions')->ignore($this->email),
            ],
            'name' => 'required|min:5',
        ], [
            'email.unique' => 'This email has already been used.',
        ]);

        Subscription::create($validateFields);
        $this->reset(); 
        session()->flash('success', 'Successfully subscribed.');
    }

    public function render()
    {
        return view('livewire.subscription-form');
    }
}

from the official docs the loading spinner indicator is simple as

<div wire:loading>
    <svg>...</svg> <!-- SVG loading spinner -->
</div>

but when i implementing it to my blade view it does not work at all

how can i achieve those logic? showing loading indicator when submitting the form and delaying responses before showing validation messages?

Answer 1

It's logical to show validation error after form submission and for a few seconds then submit form so your codes should be like this:

Component

 <?php
    
    namespace App\Livewire;
    
    use Livewire\Component;
    use Illuminate\Validation\Rule;
    use App\Models\Subscription;
    use Illuminate\Support\Facades\View;
    
    class SubscriptionForm extends Component
    {
        public $name, $email;
    
        public function submitForm()
        { 
            $validateFields = $this->validate([
                'email' => [
                    'required',
                    'email',
                    Rule::unique('subscriptions')->ignore($this->email),
                ],
                'name' => 'required|min:5',
            ], [
                'email.unique' => 'This email has already been used.',
            ]);
    
            sleep(2); // added this line

            Subscription::create($validateFields);
            $this->reset(); 
            session()->flash('success', 'Successfully subscribed.');
        }
    
        public function render()
        {
            return view('livewire.subscription-form');
        }
    }

Answer 2

You can use the sleep() function on the backend side to delay the response, e.g.:

public function submitForm()
{
   sleep(2); // waits 2 seconds

   $validateFields = $this->validate([.....

   .....
}