Serverside validation not looks so good.


Topic: Serverside validation not looks so good.

mark_huang947 pro premium asked 2 weeks ago

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:

enter image description here

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(); }); } });

enter image description here


Kamila Pieńkowska staff answered 2 weeks ago

You have a feedback message doubled. It will look broken.

If this is not the case, I need more information about what you mean by broken.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 9.0.0
  • Device: MacBook
  • Browser: Brave
  • OS: macOs Sonoma
  • Provided sample code: No
  • Provided link: Yes