Topic: Validation message on mdb-input

Spanners pro asked 4 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 4 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

Jakub Strebeyko staff answered 4 years ago


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

Spanners pro answered 4 years ago


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.

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