Question 372564 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Livewire form validation and submission

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 AppLivewire;

use LivewireComponent;
use IlluminateValidationRule;
use AppModelsSubscription;
use IlluminateSupportFacadesView;

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?

Tags:

2

Answers


  1. 0

    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([.....

   .....
}
    Login or Signup to reply.
  2. 0

    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 AppLivewire;
    
    use LivewireComponent;
    use IlluminateValidationRule;
    use AppModelsSubscription;
    use IlluminateSupportFacadesView;
    
    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');
        }
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search