Level 122
put the error message outside of the mce div
Mar 28, 2024
11
Level 5
Livewire ignore and validation does not display errors
Hello,
Using Laravel 10 and livewire 3.
I have a form with a tinyMce textarea.
I have to put wire:ignore on the div otherwise, tinyMce does not work.
The field is required, but when I submit the form the error is not being displayed.
I can see in Firebug, that the error it is being returned, it just does not display.
In my form component:
protected $messages = [
other messages...
'short_desc.required' => 'The short desctiption is required',
];
public function rules()
{
return [
... other rules
'short_desc' => 'required',
];
}
In my blade:
<div class="form-group required" wire:ignore>
<label class="form-label" for="short-desc">Coffee Short Description</label>
<textarea class="form-control @error('form.short_desc') is-invalid @enderror" wire:model="form.short_desc" rows="4"></textarea>
@error('form.short_desc)
<div class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</div>
@enderror
</div>
On form submission in Firebug:
"errors":{"form.short_desc":["The short description is required"]}
Yet, the error is not displayed. I guess it is the wire:ignore so how do I display the error in this case?
I also tried to move the error display outside of the wire:ignore div, still no display:
<div class="form-group required" wire:ignore>
<label class="form-label" for="short-desc">Coffee Short Description</label>
<textarea class="form-control @error('form.short_desc') is-invalid @enderror" wire:model="form.short_desc" rows="4"></textarea>
<small class="form-text text-muted">Displays on shop for each coffee</small>
</div>
@error('form.short_desc)
<div class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</div>
@enderror
This option, by the way, doesn't work when I remove the wire:ignore either. It seems the error needs to be inside the parent div ("form-group")
Level 5
@Snapey I forgot to mention in my post, I tried that, it didn't work either. I'll add it in the post
Level 122
have you inspected the html to see if the error appears and if its not something as simple as missing or incorrect css?
Level 5
@Snapey It can't be css, because if I remove the wire:ignore I see the error.
Also, I use a component to display the error and other errors on the page that use the same component, display fine.
I didn't use the component in the post do avoid confusion.
Inspecting the html, the error is not there, but that is the question, why is it not there?
Level 122
because if I remove the wire:ignore I see the error.
Doesn't that tell you something?
<div>
<div class="form-group required" wire:ignore>
<label class="form-label" for="short-desc">Coffee Short Description</label>
<textarea class="form-control @error('form.short_desc') is-invalid @enderror" wire:model="form.short_desc" rows="4"></textarea>
</div>
@error('form.short_desc)
<div class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</div>
@enderror
</div>
Put in an extra outer div that can contain the error.
And don't expect anything to change that is inside a Div that has wire:ignore
Caveat: If you continue to only show some of the code then these can only be suggestions
Level 122
@SigalZ see my edit
Level 5
@Snapey Thank you, nope, that doesn't help either.
<div>
<div class="form-group required" wire:ignore>
<label class="form-label" for="short-desc">Coffee Short Description</label>
<textarea class="form-control @error('form.short_desc') is-invalid @enderror" wire:model="form.short_desc" rows="4"></textarea>
<small class="form-text text-muted">Displays on shop for each coffee</small>
</div>
@error('form.short_desc')
<div class="invalid-feedback" role="alert">
<div class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</div>
</div>
@enderror
</div>
I don't put the whole code, to save people reading lines and lines of code that has nothing to do with the problem.
It is a simple blade file, nothing special, but it appears, you cannot display errors on fields with wire:ignore.
I guess I will have to find a way to force displaying the error in another way.
All the other errors divs <div class="invalid-feedback" get this css rule if there is an error: display:block.
Following this css rule:
.is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip, .was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip { display: block; }
But the textarea errors stay as display:none.
I tried moving the error div out, I tried putting it inside another div that has the class: is-invalid.
Nothing works.
I don't understand why this code doesn't work, moving it all out of wire:ignore, totally separate div:
@error('form.short_desc')
<div class="is-invalid"> {{-- hardcoding is-invalid class --}}
<div class="invalid-feedback" style="display:block"> {{-- hard coding display:block --}}
The short description is required
</div>
</div>
@enderror
does not work, and the error does exists in the response, checked in firebug.
Level 122
its not a simple blade view, its a livewire view, and in your original question, what is the root div is important
It is a simple blade file, nothing special, but it appears, you cannot display errors on fields with wire:ignore.
That is definitely not the case. You sure you cannot show the error anywhere in the view? In which case I would check that you are referencing the error correctly
Level 5
@Snapey Thank you for all the help :)
Level 5
It looks like there is another problem, the form does not recognize when I do put text in the field, it returns the error with or without text in the field.
It looks like it is impossible to use Livewire when you want to use a text editor in your form.
Level 5
Ok, got it to work, the code:
<div class="@error('form.short_desc') is-invalid @enderror">
<div class="form-group required" wire:ignore>
<label class="form-label" for="short-desc">Coffee Short Description</label>
<textarea class="form-control" wire:model="form.short_desc" rows="4" id="short-desc"></textarea>
<small class="form-text text-muted">Displays on shop for each coffee</small>
</div>
@error('form.short_desc')
<div class="invalid-feedback" role="alert" style="display:block">{{-- display:block hard coded --}}
<strong>{{ $message }}</strong>
</div>
@enderror
</div>
@push('js')
<script src="{{ asset('tinymce/tinymce.min.js') }}"></script>
<script>
tinymce.init({
selector: '#short-desc',
forced_root_block: false,
setup: function (editor) {
editor.on('init change', function () {
editor.save();
});
editor.on('change', function (e) {
@this.set('form.short_desc', editor.getContent());
});
}
});
</script>
@endpush
Halleluyah
Please or to participate in this conversation.