I have a system with two fields (password and password confirmation) that works, but when I type the password it shows me a notification that it doesn’t match (without writing anything in the confirmation), then it removes the error message after I type the correct password in the confirmation field but only if I click outside the confirmation input and I want it to do so while I type said confirmation correctly without clicking outside, in real time.
My form inputs
<div class="row mb-3">
<div class="col-md-12">
<input wire:model.lazy="password" id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="{{ __('Password') }}" required>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-4">
<div class="col-md-12">
<input wire:model.lazy="password_confirmation" id="password_confirmation" type="password" class="form-control" placeholder="{{ __('Confirm Password') }}" name="password_confirmation" required>
</div>
</div>
My livewire
<?php
namespace App\Http\Livewire;
use App\Models\User;
use Livewire\Component;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules\Password;
class ClientRegisterFormValidation extends Component
{
public $username;
public $identification;
public $password;
public $password_confirmation;
protected $rules = [
'username' => ['required', 'regex:/^(\d+)$/', 'max:5', 'unique:users'],
'identification' => ['required', 'min:6', 'regex:/^(\d+)$/', 'unique:users'],
'password' => ['required', 'confirmed', 'min:8'],
];
protected $messages = [
'password.min' => 'la contraseña debe tener al menos 8 caracateres',
'identification.regex' => 'El contratado debe contener 11 digitos',
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
}