Topic: Validation message on mdb-input
Hi there,
I was wondering how to get a validation message to appear below an invalid mdb-button?
I have tried this:
<mdb-input v-model="username" icon="user" label="Username" required/>
<div class="invalid-feedback">
You must enter a username
</div>
But on blank validation, the field is underlined in red but the error message is not displayed.
Many thanks,
Span.
Hi Span,
Yes, you are correct - and sorry for the confusion. It is worth to mention that the article you included presents the ability to style and trigger default browser validation mechanism on native HTML elements "the Bootstrap way" - not the way to validate custom input components like mdb-input "the Vue way". These usually get validated through case-to-case basis on submit event by a custom event handler toggling a data property.
With Best Regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 4.6.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Jakub Strebeyko staff commented 5 years ago
Hi there Spanners, What do you mean by 'blank validation' and an 'invalid mdb-button'? In general when setting up validation, a custom handler on 'input' event is needed to evaluate the input's current value and toggle (or not) some kind of data property like `this.inputIsValid=true` and then have the `div.invalid-feedback` to `v-show="isPressed"`. Best, Kuba