Validation message on mdb-input


Topic: Validation message on mdb-input

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

Spanners pro answered 2 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.

Jakub Strebeyko staff answered 2 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
Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Vue
  • MDB Version: 4.6.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No