Model form disappears on Validation Error

[alvins-dev]

@PhiloNL Thank you for the package.
I am stuck with the validation part when working with the modal.

public function submit()
    {
        $this->validate();
        $this->user->save();
    }

After I click submit , Livewire is returning validation error when there is.
serverMemo: {errors: {user.email: ["The email field is required."]}
@error('user.email') <p {{ $message }} </p> @enderror
But when the modal is re-rendered, it removes the whole form-content leaving just LivewireUIModal HTML wrap.
How can I display the validation errors within Modal?
(1)

(2)

(3)

(4)

[PhiloNL]

This often happens if you have multiple root elements. Livewire only allows one root element to be present. So try wrapping the content of your component in a div.

[Mte90]

I have the same issue, I added validate on update and the rules variable.

I think that there is something in JS that removes the modal at all on clicking the submit button.

[PhiloNL]

In some cases, this was also caused because the form was missing wire:submit.prevent="foo" on the form. Also verify that there are no unclosed divs.

[Mte90]

This if you have a form but with this package <x-modal form-action="update"> there is this and in the <x-slot name="content"> there aren't any form.

I guess that I should write in my modal:

<button wire:submit.prevent="submit" wire:click="$emit('closeModal')">{{ __('messages.add') }}</button>

Or maybe it's better just to remove the wire:click method so I close it by PHP? But the event that execute the update method in the component with that should be executed right?

[PhiloNL]

If you use a blade component for the modal that includes the form, you can set the wire:submit.prevent by editing that specific component. Not sure if this is the cause of the issue, though. I would recommend checking for misplaced divs, which could also cause this issue as well.

[Mte90]

I was able to fix it in that way and removing the wire:click

[chiragparekh]

I had same issue, removing comment of the root element fixed the issue.