Validation message on mdb-input

Topic: Validation message on mdb-input

Spanners pro asked 6 years ago

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.

Jakub Strebeyko staff commented 6 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

Add comment

Spanners pro answered 6 years ago

0 0 Best answer

Hi Kuba, I don't understand - the validation examples shown here on your website don't do anything like that, and they work but they use an "input" tag and not an "mdb-input". Thanks Span.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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: No
Technology: MDB Vue
MDB Version: 4.6.0
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Spanners

Pro User

69Support score
5Questions 4Answers

0Snippets likes 0Snippets