How to show the errors with wire:ignore?

I am trying to show the error inside the wire:ignore div, but no success. Is there a workaround to get this working? It has to be like this otherwise my datepicker does not work anymore

<div class="w-full form-field" wire:ignore>
                <label class="form-label">
                    Reisezeitraum *
                </label>

               <input type="text" wire:model="travel_period" id="date"
                    class="form-input input-date @error('travel_period') is-invalid @enderror">
 </div>

LaryAI

1 year ago

Level 58

To show validation errors inside a wire:ignore div in Livewire, you need to handle the error messages outside of the wire:ignore block because Livewire won't update anything inside wire:ignore. However, you can still display the error messages by placing them just outside the wire:ignore block.

Here's a solution to achieve this:

Keep the wire:ignore block for your datepicker to function correctly.
Place the error message outside the wire:ignore block.

Here's an example of how you can do it:

<div class="w-full form-field" wire:ignore>
    <label class="form-label">
        Reisezeitraum *
    </label>

    <input type="text" wire:model="travel_period" id="date"
           class="form-input input-date @error('travel_period') is-invalid @enderror">
</div>

@error('travel_period')
    <div class="error-message">
        {{ $message }}
    </div>
@enderror

In this example:

The wire:ignore block contains the datepicker input field.
The @error directive is used outside the wire:ignore block to display the error message.

This way, Livewire can update the error message without interfering with the wire:ignore block.

lara28580

1 year ago

Level 10

@LaryAI but I need to add the is-invalid class to the input.

Snapey

1 year ago

Best Answer

Level 122

@SmokeTM you would need to set a css rule for div with error, style any child input box with error

1 like

MohamedTammam

1 year ago

Level 51

If you're using wire:ignore this means this section will be rendered only once. Which means it will not render the errors inside it after initial rendering.

You can use AlpineJS

<div x-data="{
	tarvelPeriodError: false,
}">
<!-- Hacky way to set errors on each render -->
@error('travel_period')
<div wire:key="rand()" x-data x-init="() => tarvelPeriodError = true"></div>
@enderror
<div class="w-full form-field" wire:ignore>
  <label class="form-label">
    Reisezeitraum *
  </label>

  <input
    type="text"
    wire:model="travel_period" id="date"
    class="form-input input-date"
    :class="{'is-invalid': travelPeriodError }"
  >
</div>
</div>

Please or to participate in this conversation.