Topic: invalidFeedback custom prop not showing
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.)
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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
foundant pro premium priority commented 2 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 pro premium priority commented 2 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.