chm_matt's avatar

Form validation errors not clearing on updating value

We have a select element in a Livewire 3 component which has the attribute in the controller:

	#[Validate('required|numeric')]
    public $appt_type;

And this in the blade file:

<select name="appt_type" id="appt_type"
                 wire:model.live="appt_type"
                 wire:change="setEndTime"
                class="py-1 px-2 pr-5 block w-full text-gray-700 border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500">
           <option value="" selected>Select a type...</option>
          @foreach ($services as $service)
               <option value="{{ $service->ID }}">{{ $service->own_description }}</option> 
         @endforeach 
   </select>
   @error('appt_type') <span class="err-message">{{ $message }}</span> @enderror
   <x-input-error :messages="$errors->get('appt_type')" class="mt-2" />

(I know there are two error displays above, they are there for testing.) If element doesn't have a value selected and the form containing the element is submitted I (correctly) get an error: "The appt type field is required."

However, if the value is then updated, the error message doesn't clear, even though the form will subsequently submit successfully. The display of the error persists even after the form has the followed called on submission:

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

If I examine the response from the server after updating the value of the select element, and it doesn't contain any error messages \"errors\":[],, so I'm assuming that the client side isn't updating. Am I missing something I should be including to make these errors clear when value is updated or the form is reset?

0 likes
7 replies
vincent15000's avatar

Can you show the function inside which you have the different $this->reset...(); lines please ?

1 like
chm_matt's avatar

Hi @vincent15000 , it's just a simple one:

public function close() {
        $this->reset();
        $this->resetErrorBag();
        $this->resetValidation();
    }

It is triggered by the cancel button on the modal containing the form, and at the end of the function that handles the form submission. The start of form submission function contains:

$this->validate();
1 like
chm_matt's avatar

Hi @vincent15000 , the form submission is handled inside the modal controller. Will that be a problem?

Snapey's avatar

the modal containing the form

Do have multiple of the same modal, or is there only one, if they are in a child component is this component repeated?

1 like
chm_matt's avatar

Hi @snapey , thanks for asking. There's only one of the modal and it's not in a child component. Looking at the source code of the page, it's the only instance of appt_type rendered on the page.

1 like
chm_matt's avatar
chm_matt
OP
Best Answer
Level 1

For anyone else who is having this issue, I finally found the cause. I had wire:transition on an element in another Livewire component on the page. According to the Livewire docs that has to be used within a Blade conditional and that wasn't how it was being used...

1 like

Please or to participate in this conversation.