How do I hide something when a validation runs in Laravel Blade using Livewire?

Viewed 345

I have an input type of file in my Laravel blade, I also have validation of image|max:1024 in the livewire. The problem is the input validates but it errors me out because the Laravel Blade displays the img that is not a file type of image so I want to hide it when it doesn't reach the validation.

    <div class="pb-2">
        @if ($header_image)
            @error('header_image')
                <span class="error">{{ $message }}</span>
            @enderror
            <img src="{{ $header_image->temporaryUrl() }}" height="30%" width='50%'>
        @else
            <img src="{{url('storage/photos/'.$banner->header_image)}}" height="30%" width='50%' />
        @endif
    </div>

I want to hide the one with the temporaryUrl().

2 Answers

You can use this validator approach to to any action on fails

$validation = Validator::make($data,$rules);
if($validation->fails()) {
   $this->property = null;
}

I have another approach to this. I use livewire dehydrate function. In livewire component:

public function dehydrate()
{
    if ($this->getErrorBag()) {
        //Do whatever you like..
    }
}
Related