Livewire Array Instant Validation

Question

I am trying out Livewire's instant authentication which seems to work fine for other inputs but array fields. Wondering how I could show the error messages for array inputs. Blade code

<input type="tel" pattern="[0-9]+" minlength="6" wire:model="contact_phone.{{$index}}"
       class="form-control {{ $errors->has('contact_phone.*') ? ' is-invalid' : '' }} " required>
<div>@error('contact_phone') <span class="error text-danger small">{{ $message }}</span> @enderror</div>

Validation

public function updated($field)
    {
        $this->validateOnly($field, [ 
            'contact_phone' => 'required|array|min:1',
            'contact_phone.*' => 'required|string|min:3',
        ]);

    }

Following this doc

Reuben, your input is for "contact_phone" and your validation is for "contact_name"; maybe this is your issue? Otherwise, please post the correct code, thanks. — Elliot
– Elliot, Commented Apr 7, 2020 at 5:32

David Buck · Accepted Answer · 2020-08-23 07:04:50Z

1

This is how I finally got it to work. The key was to access the index of the specific array input in @error directive.

<input type="tel" pattern="[0-9]+" minlength="6" wire:model.lazy="contact_phone.{{$index}}"
       class="form-control {{ $errors->has('contact_phone.'.$index) ? ' is-invalid' : '' }} " required>
<div>@error('contact_phone.{{$index}}')
    <span class="error text-danger small">{{ $message }}</span> @enderror
</div>

edited Aug 23, 2020 at 7:04

David Buck

3,87740 gold badges54 silver badges73 bronze badges

answered Aug 22, 2020 at 21:39

Reuben Frimpong

931 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Livewire Array Instant Validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related