Managing Error Bags for a single modal used across multiple records

Hi all, apologies in advance, I have searched for information on this but I would imagine any results get lost amidst the question of managing errors across multiple modals.

The situation is:

I have a view that is basically an index table, upon which I have a modal dialog, containing a form to edit some of the information for the row in question.
This is a single modal, shared across all records, using alpine to pass it data about the record from the index (no re-fetching data from the backend).
This form submits normally (no ajax) to a Laravel route.
If there are errors returned from the FormRequest they are scoped to an error bag for that specific modal (there will be more than one modal on this page eventualyl), and I get the failing modal to re-open, where the errors are displayed.

All of the above is working fine.

The problem occurs when the following happens:

User submits a form that fails validation.
Modal is opened to display these errors back to the user.
User cancels out of the modal, and opens the same modal for another record.
Errors are still displayed on the modal that opens for a different record.

So the question is, does anyone have any neat ideas for how to filter the error bag to the messages for a specific record? Something along the lines of:

Adding some sort of ID within the error bag to check?
Adding the ID of the record to the error bag name itself? (am going to play with this idea, but not sure it will work given that the Modal is already rendered, though it might if the redirect re-renders it)

Caveats.

I don't want to use Livewire (as will likely end up converting this to Vue later on).
Want to stick to Blade/Alpine and using normal Laravel Form submissions if possible.
Don't want to create a separate modal for every row of the index.

Thanks!

LaryAI

2 years ago

Level 58

One possible solution to filter the error bag messages for a specific record is to include the record's ID in the error bag name itself. This can be achieved by appending the record's ID to the error bag name when displaying the errors in the modal.

Here's an example of how you can implement this solution using Laravel and Blade:

In your controller, when returning the view that contains the modal, pass the record's ID to the view:

public function edit($id)
{
    $record = Record::find($id);
    return view('edit', compact('record'));
}

In your Blade view, when rendering the modal, include the record's ID in the error bag name:

<!-- Modal -->
<div id="editModal{{ $record->id }}" x-data="{ open: false }">
    <!-- Modal content -->
    <div x-show="open">
        <!-- Display errors for the specific record -->
        @if ($errors->has('record_' . $record->id))
            <ul>
                @foreach ($errors->get('record_' . $record->id) as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        @endif

        <!-- Form content -->
        <form action="{{ route('record.update', $record->id) }}" method="POST">
            <!-- Form fields -->
            <!-- Submit button -->
        </form>
    </div>
</div>

In your FormRequest class, when validating the form, include the record's ID in the error bag name:

public function rules()
{
    return [
        // Validation rules
    ];
}

public function attributes()
{
    return [
        // Attribute names
    ];
}

public function messages()
{
    return [
        // Custom error messages
    ];
}

protected function failedValidation(Validator $validator)
{
    $validator->after(function ($validator) {
        $validator->errors()->add('record_' . $this->route('record'), 'Validation failed.');
    });

    parent::failedValidation($validator);
}

Finally, in your JavaScript code, you can open the modal for a specific record by setting the open property to true:

// Open the modal for a specific record
function openModal(recordId) {
    document.getElementById('editModal' + recordId).__x.$data.open = true;
}

With this solution, each modal will have its own error bag scoped to the specific record. When displaying the errors, you can check if the error bag contains errors for the current record and display them accordingly.

npw

2 years ago

Level 1

Thanks Lary! That looks promising, will try it out without appending the record id to the modal id, and report back. Happy to receive any human input too 🙂

Please or to participate in this conversation.