How to set rules to validate nested array with livewire?

Question

how to set rules and error message for validate nested array on livewire? i am using livewire 2.12 and laravel 10.

viw on blade :

<div class="card card-primary mb-n3">
        <form wire:submit.prevent='submitQuestion' method="POST" class="needs-validation" novalidate="">
            @csrf
            @foreach ($questions as $key => $question)
                <div class="card-body">
                    <div class="section-title">Question {{ $loop->iteration }} </div>
                    <p class="sz-question">{{ $question->description }}</p>
                    <p class="sz-question2">{{ $question->info }}</p>
                    <div class="alert alert-info sz-question3">{!! $question->notes !!}</div>
                    <div class="row">
                        <div class="form-group col-md-7 col-lg-7">
                            <label class="d-block mb-3">Choose<span class="sz-sp"> *</span></label>
                            @foreach ($question->choices as $choice)
                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input"
                                        type="radio"
                                        id="choice-{{ $choice->id }}"
                                        value="{{ $choice->id }}_{{ $question->id }}"
                                        wire:model='answers.{{ $key }}.choice'
                                    >
                                    <label class="form-check-label" for="choice-{{ $choice->id }}">{{ $choice->description }}</label>
                                </div>
                            @endforeach
                            @error('answers.{{ $key }}.choice')
                                <small class="sz-error" id="error-{{ $question->id }}">
                                    <br/> {{ $message }}
                                </small>
                            @enderror
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="card-body text-right mb-0">
                @error('answers')
                    <small class="sz-error" id="error-{{ $question->id }}">
                        <br/> {{ $message }}
                    </small>
                @enderror
            </div>
            <div class="card-body text-right">
                <button
                    type="submit"
                    id="tk-butonSubmit"
                    class="btn btn-success mx-1"
                    wire:loading.class="disabled"
                >Submit <i class="fas fa-check-circle"></i></button>
            </div>

       </form>
    </div>

php :

public $questions;
public $topicId = 1;
public $answers = [];

public function mount()
{
     /** @var Question $questions */
     $questions = Question::whereTopicId($this->topicId)->get();

     $this->questions = $questions;
}

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

example result :

{"answers":[{"choice":"b"},{"choice":"a"}]}

then rules like this:

protected $rules = [
    'answers' => 'required',
    'answers.*.choice' => 'required',
];

submit function :

public function submitQuestion()
{
     $validData = $this->validate();
     Log::info('' . json_encode($validData));
}

when I press the submit button, the validation still gives results even though I haven't filled in all the questions. So, how should i set the rules?

HichemTech · Accepted Answer · 2023-08-11 13:18:51Z

2

you can use this validation to check if the array is actually filled or empty :

$rules = [
    'answers' => 'required|array|min:1',
    'answers.*.choice' => 'required',
];

answered Aug 11, 2023 at 13:18

HichemTech

5194 silver badges11 bronze badges

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

5 Comments

Syaifudin Zuhri Over a year ago

oh, its work with using this required|array|min:1. so this rule is not needed? 'answers.*.choice' => 'required',

HichemTech Over a year ago

@SyaifudinZuhri 'answers.*.choice' => 'required', means that each item of the array should contain the key choice. so if you have an array like this {"answers":[{"choice":"b"},{"choice":"a"},{"hello":"x"}]} it won't be accepted because it has an item with diffrente key.

Syaifudin Zuhri Over a year ago

i got it now. how about add error message? can't use like this? error('answers.{{ $key }}.choice') {{ $message }} enderror. it works when i do like this error('answers.*.choice') {{ $message }} enderror.

HichemTech Over a year ago

you mean the blade directive @error right ??, you can do it like this : @error('answers.'.$key.'.choice') {{ $message }} @enderror

Syaifudin Zuhri Over a year ago

yes, the blade directive

Collectives™ on Stack Overflow

How to set rules to validate nested array with livewire?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related