Serverside validation not looks so good.

Expected behavior

I am using HTMX with Laravel. The HTML is rendered using Blade templates. When server-side validation fails, I expect the UI to display validation errors styled like this: https://mdbootstrap.com/docs/standard/forms/validation/#section-server-side

Actual behavior However, the actual result looks broken and does not follow the expected layout:

Resources (screenshots, code snippets etc.)

            <div class="form-outline mb-4" data-mdb-input-init>
                <input name="email" type="email"
                    class="form-control is-invalid @error('email')is-invalid @enderror"
                    value="{{ old('email') }}" />
                <label class="form-label">Email address</label>
                <div class="invalid-feedback mb-4">
                    <i class="fas fa-triangle-exclamation me-2"></i>test
                </div>
                @error('email')
                    <div class="invalid-feedback mb-4">
                        <i class="fas fa-triangle-exclamation me-2"></i>{{ $message }}
                    </div>
                @enderror
            </div>

... document.body.addEventListener('htmx:afterSwap', function(evt) { // 重新初始化 input 樣式 if (typeof mdb !== 'undefined') { document.querySelectorAll('.form-outline').forEach((formOutline) => { new mdb.Input(formOutline).init(); }); } });