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:
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(); }); } });
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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