Form Validation - Multiple errors not possible ?

Hello there,

im kinda confused right now i was always under the impression it was possible to validate the fields in a component and it returns the Errorbag with the errors for each fields that is not empty.

I have a Livewire component and use a Livewire Form to handle the input fields and the validation. All fields are set to be updated on blur. I tried using $this->validate() in the updated() hook but that also validates fields that aren't filled in yet so that is not quite what i want.

Here is the form properties and rules:

    #[Validate]
    public string $name = '';

    #[Validate]
    public ?string $begin = null;

    #[Validate]
    public ?string $end = null;

    public function rules()
    {
        return [
            'name' => 'required|min:4|max:255|alpha_num:ascii',
            'begin' => 'sometimes|date|after_or_equal:today',
            'end' => 'sometimes|date|after_or_equal:today',
        ];
    }

Here a quick showcase so its easier to understand:

GIF of questionable behavior

The dump below is

@if($errors->isNotEmpty())
{{ dump($errors) }}
@endif

Is there something I'm missing, is this intended behavior ?

LaryAI

2 years ago

Level 58

It seems like you want to validate fields individually as they are updated, rather than validating all fields at once. In Livewire, you can achieve this by specifying the field you want to validate in the validate method within the updated hook. Here's how you can modify your updated method to validate individual fields:

public function updated($propertyName)
{
    $this->validateOnly($propertyName);
}

The validateOnly method will only validate the field that has been updated, based on the rules you've defined in your rules method. This way, you won't get validation errors for fields that haven't been touched yet.

Here's how your Livewire component might look with the updated method:

use Livewire\Component;
use Illuminate\Validation\Rule;

class YourComponent extends Component
{
    public string $name = '';
    public ?string $begin = null;
    public ?string $end = null;

    public function rules()
    {
        return [
            'name' => 'required|min:4|max:255|alpha_num',
            'begin' => 'sometimes|date|after_or_equal:today',
            'end' => 'sometimes|date|after_or_equal:begin',
        ];
    }

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    // Other methods...
}

Please note that I've corrected the validation rule for name by removing :ascii from the alpha_num rule, as alpha_num does not take any parameters. Also, I've assumed that you want the end date to be after or equal to the begin date, so I've updated the rule for end accordingly.

Now, when a field is updated and loses focus (on blur), only that field will be validated, and you will get an error message specific to that field if it fails validation.

Remember to handle the display of error messages appropriately in your Livewire component's view:

<div>
    <input type="text" wire:model.lazy="name" />
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model.lazy="begin" />
    @error('begin') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model.lazy="end" />
    @error('end') <span class="error">{{ $message }}</span> @enderror

    <!-- Other form fields and buttons -->
</div>

This should give you the desired behavior of validating fields individually as they are updated.

dev-idkwhoami

2 years ago

Level 10

@LaryAI Thanks for the few tips on the validation rules but i integrated your tips and it still only shows the validation on the newest updated input field.

johndivam

2 years ago

Best Answer

Level 2

 #[Rule('required|string|min:4|max:255|alpha_num:ascii')]
    public $name ;

   #[Rule('nullable|sometimes|date|after_or_equal:today')]
    public $begin ; 

  public function create(){
        $validated = $this->validate(); // wil validate all 
 }

2 likes

dev-idkwhoami

2 years ago

Level 10

@johndivam This works. Thank you.

Although i strongly believe this is more a "work-around". I feel like Livewire should change this behavior or make it optional, because what is the point of a "Form" object handling input & validation but i still need to manually control which fields get errors ^^

Please or to participate in this conversation.