Laravel livewire, prevent auto rendering when type in form

Question

Sorry, I have a problem when create a simple form with liveware, every type that I input is immediately rendering so that it appears loading and after a lot of typing, an error appears like in the images, how to solve this problem and prevent auto rendering when typing?

I use Laravel liveware 1.3

Screenshot

form image

Blade component

<form wire:submit.prevent="check"><div class="form-group">
      <label class="label">Email</label>
      <div class="input-group">
         <input wire:model="email" type="email" class="form-control" placeholder="[email protected]">
         <div class="input-group-append">
            <span class="input-group-text">
            <i class="mdi mdi-check-circle-outline"></i>
            </span>
         </div>
      </div>
      @error('email')<label class="text-danger">{{ $message }}</label> @enderror
  </div>
  <div class="form-group">
      <label class="label">Password</label>
      <div class="input-group">
         <input wire:model="password" type="password" class="form-control" placeholder="**********">
         <div class="input-group-append">
            <span class="input-group-text">
            <i class="mdi mdi-check-circle-outline"></i>
            </span>
         </div>
      </div>
      @error('password')<label class="text-danger">{{ $message }}</label> @enderror
   </div>
   <div class="form-group">
      <button class="btn btn-success submit-btn btn-block" wire:loading.attr="disabled" >
         <div wire:loading.remove>Login</div>
         <div wire:loading>
            <div class="loading-bar bg-white"></div>
            <div class="loading-bar bg-white"></div>
            <div class="loading-bar bg-white"></div>
            <div class="loading-bar bg-white"></div>
         </div>
      </button>
   </div>
</form>

Controller

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Login extends Component
{
    
    public $password;
    public $email;

    protected $rules = [
            'password' => 'required',
            'email' => 'required|email',
        ];
        
    public function check()
    {
    
        $this->validate($this->rules);
        
    }

    public function render()
    {
        return view('livewire.login');
    }
}

Route

Route::livewire('/login','login');

Thanks for help.

Answer 1

<input wire:model="email".....

Try change that to (only hit the server on submit)

<input wire:model.defer="email" 

or even (only hit the server on change (not on every character))

<input wire:model.lazy="email"