Topic: invalidFeedback custom prop not showing

foundant priority asked 6 months ago


Expected behavior If I add a custom invalidFeedback message, i expect that message to show when the form field is invalid.

<MDBInput
    :minlength="5"
    validationEvent="input"
    required
    label="Label *"
    invalidFeedback="Label must be at least 5 characters long"
    :disabled="loading"
    v-model="newTask.label"
/>

// or without minlength
<MDBInput
    validationEvent="input"
    required
    label="Label *"
    invalidFeedback="Add a label please."
    :disabled="loading"
    v-model="newTask.label"
/>

Actual behavior The standard invalid feedback message shows when the filed is invalid "Please fill out this field."

Resources (screenshots, code snippets etc.)


foundant priority commented 6 months ago

Adding min-length property displays this error message

"Please lengthen this text to 5 characters or more (you are currently using 1 character)."

which can also not be changed. It is too lengthy and i need to shorten it.


foundant priority commented 6 months ago

Upon inspecting the source. I can see the div with he class "invalid-feedback" and it contains my custom message. However when the form validated, the message is overwritten by the default message.


Bartosz Cylwik staff answered 6 months ago


Hello! It appears that including the validationEvent prop overrides the custom invalid/valid messages with the information generated by the checkValidity jsmethod. We will discuss this functionality with our team and decide whether it should be changed.

In the meantime, you can continue using validation without including the validationEvent. Just attach an @input listener to the input and create a method to manage the validation. Checkout my snippet below:

https://mdbootstrap.com/snippets/vue/b-cylwik/6005487#html-tab-view



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: MacBook pro
  • Browser: Chrome
  • OS: MacOs Sonoma
  • Provided sample code: No
  • Provided link: No