Laravel Livewire errors are not cleared

Question

I am experimenting with Laravel Livewire and I came across a situation where the previous errors are displayed even though the form is successfully submitted.

Before hit Save

After hitting Save

Html segment of name in blade file customer-new.blade.php.

<div class="form-group">
    <div class="border rounded-0 px-1">
        <label class="mb-0" for="name">Name</label>
        <input wire:model="name" type="text" class="form-control form-control-sm " id="customer-name" aria-describedby="customer-nameHelp">
    </div>
    @error('name') <span class="err-message">{{ $message }}</span> @enderror
</div>

and the Save button code:

<button 
  wire:click="store" 
  wire:loading.attr="disabled" 
  wire:target="store" 
  type="submit" 
  class="btn btn-sm btn-light">Save
</button>

store method of CustomerNew.php:

public function store()
{
    $this->validate([
        'name' => 'required|max:80',
        'street' => 'required|max:100',
        'city' => 'required|max:40',
        'dueAmount' => 'numeric|min:0'
    ]);

    Customer::create([
        'name' => $this->name,
        'street' => $this->street,
        'city' => $this->city,
        'due_amount' => $this->dueAmount,
    ]);

    session()->flash('message', 'Customer was saved');

    $this->clear();
}

and the clear() method is like:

public function clear() {
  $this - > name = '';
  $this - > street = '';
  $this - > city = '';
  $this - > dueAmount = 0;
}

Are you sure you've not sending the form twice? Be sure to not use a submit button when using <form wire:submit.prevent="store"> when already submiting the form via the button. — s1x
– s1x, Commented Jan 11, 2021 at 23:08

Community · Accepted Answer · 2020-06-20 09:12:55Z

31

According to docs https://laravel-livewire.com/docs/input-validation,

You need to reset the validations whenever you want

Direct Error Message Manipulation The validate() and validateOnly() method should handle most cases, but sometimes you may want direct control over Livewire's internal ErrorBag.

Livewire provides a handful of methods for you to directly manipulate the ErrorBag.

From anywhere inside a Livewire component class, you can call the following methods:
    $this->addError('email', 'The email field is invalid.');
    // Quickly add a validation message to the error bag.
    
    $this->resetErrorBag();
    $this->resetValidation();
    // These two methods do the same thing. The clear the error bag.
    // If you only want to clear errors for one key, you can use:
    $this->resetValidation('email');
    $this->resetErrorBag('email');
    
    $errors = $this->getErrorBag();
    // This will give you full access to the error bag,
    // allowing you to do things like this:
    $errors->add('some-key', 'Some message');

HINT

I am using the reset methods on hydrate function like following

...
    public function hydrate()
    {
        $this->resetErrorBag();
        $this->resetValidation();
    }
...

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 15, 2020 at 2:37

A. Khaled

1,62818 silver badges29 bronze badges

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

1 Comment

rizqyhi Over a year ago

I guess calling $this->resetValidation() is enough, since it called resetErrorBag() method internally

Roman Grinev · Accepted Answer · 2023-01-03 18:08:50Z

1

It is better to send $name to the resetValidation and resetErrorBug. In this way you reset validation for the updating fields only. Here is my example:


    public function updated($name, $value)
    {
        $this->resetValidation($name);
        $this->resetErrorBag($name);
    }

answered Jan 3, 2023 at 18:08

Roman Grinev

1,03712 silver badges22 bronze badges

Comments

Roman Slisarenko · Accepted Answer · 2023-09-04 14:50:35Z

1

Usually, using the methods mentioned above is more than enough, and they should solve all your issues:

$this->resetErrorBag();
$this->resetValidation();

However, in practice, these errors may not disappear. As an alternative solution, you can apply the following approach:

Add event listener:

window.addEventListener('reset-error', event => {
    const paragraph = document.getElementById(event.detail.id += '-error');
    if (paragraph) {
        paragraph.textContent = '';
    }
});

Dispatch browser event:

$this->dispatchBrowserEvent('reset-error', ['id' => "sandbox"]);

This should be enough for now, but if you encounter any issues or have further questions, please feel free to ask.

answered Sep 4, 2023 at 14:50

Roman Slisarenko

4574 silver badges11 bronze badges

Comments

Bhargav Rao · Accepted Answer · 2020-04-07 05:54:05Z

0

You should reset the public properties by using the livewire's reset method. Delete your $this->clear() method definition and replace it with the following:

$this->reset('name', 'street', 'city', 'dueAmount');

edited Apr 7, 2020 at 5:54

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Mar 23, 2020 at 19:12

Viraj Khatavkar

541 bronze badge

1 Comment

burf Over a year ago

Won't these clear the input instead of clearing the error messages?

evba · Accepted Answer · 2020-09-25 09:45:22Z

0

add id's to the error message div

@error('name') <span class="err-message" id="name-error">{{ $message }}</span> @enderror

@error('street') <span class="err-message" id="street-error">{{ $message }}</span> @enderror

@error('city') <span class="err-message" id="city-error">{{ $message }}</span> @enderror

@error('due_amount') <span class="err-message" id="due_amount-error">{{ $message }}</span> @enderror

answered Sep 25, 2020 at 9:45

evba

11 bronze badge

Comments

Krishnan Unni Suresh · Accepted Answer · 2022-08-24 07:24:25Z

0

      $this->resetErrorBag();

Just add this in your clear() method. This will reset the error bag after each save.

edited Aug 24, 2022 at 7:24

answered Aug 13, 2022 at 5:55

Krishnan Unni Suresh

115 bronze badges

Collectives™ on Stack Overflow

Laravel Livewire errors are not cleared

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related