Laravel/Livewire password validation is failing when passwords match

Laravel/Livewire password validation is failing when passwords match. Using laravel/fortify.

In BasicWizardStepComponent:

abstract class BaseWizardStepComponent extends StepComponent
{
    abstract public function rules();
    abstract public function render();

    public function submit(): void
    {
        $this->validate();

        $this->nextStep();
    }
}

Rules override in PasswordStepComponent (extends BaseWizardStepComponent):

public function rules(): array
{
    return (new StorePasswordRequest())->rules();
}

Form request can be used in Livewire and I've used them successfully in other parts of the app. laraveldaily.com/post/how-to-use-form-request-in-livewire

StorePasswordRequest

public function rules(): array
{
    return [
        'password' => [
            'required',
            'confirmed',
            'min:6',
        ],
    ];
}

HTML

<label for="password">
    Password
</label>

<input type="password" name="password" id="password" value="" wire:model.live="password">

<label for="password_confirmation">
    Confirm Password
</label>

<input type="password" name="password_confirmation" id="password_confirmation" value="" wire:model.live="password_confirmation">

I'm pasting the same password into both the password and the password_confirmation fields, so I expect to pass validation.

I get this error: The password field confirmation does not match.

If I add password_confirmation as required in the validation, I get this error: No property found for validation: [password_confirmation]

LaryAI

1 year ago

Level 58

The issue you're encountering is likely due to the way Livewire handles data binding and validation. When using the confirmed rule in Laravel, it expects a field with the same name suffixed with _confirmation to be present in the data being validated. In your case, it seems that the password_confirmation field is not being recognized by Livewire.

Here's how you can resolve this issue:

Ensure Both Fields Are Bound Correctly: Make sure that both password and password_confirmation are properly bound to your Livewire component's properties.
Define Properties in Livewire Component: Ensure that your Livewire component has properties for both password and password_confirmation.
Update the Livewire Component: Make sure your Livewire component has the necessary properties and that they are being validated correctly.

Here's an example of how your Livewire component might look:

use Livewire\Component;

class PasswordStepComponent extends BaseWizardStepComponent
{
    public $password;
    public $password_confirmation;

    public function rules(): array
    {
        return [
            'password' => 'required|confirmed|min:6',
        ];
    }

    public function submit(): void
    {
        $this->validate();

        // Proceed to the next step or handle the password storage
        $this->nextStep();
    }
}

Ensure Correct HTML Binding: Make sure your HTML inputs are correctly using wire:model to bind to the Livewire properties.

<label for="password">
    Password
</label>
<input type="password" name="password" id="password" wire:model="password">

<label for="password_confirmation">
    Confirm Password
</label>
<input type="password" name="password_confirmation" id="password_confirmation" wire:model="password_confirmation">

Check for Typos: Double-check for any typos in your property names or bindings.

By ensuring that both password and password_confirmation are properly defined and bound in your Livewire component, the confirmed validation rule should work as expected. If you continue to experience issues, consider adding some debugging statements or using Livewire's debugging tools to inspect the state of your component's properties.

Kirk.Franklin

1 year ago

Level 2

I needed to add a password_confirmation property in the component.

1 like

Please or to participate in this conversation.