Display validation error message for their respective elements
Learn how to assign backend errors to elements.
We can subscribe to @response event and loop through error messages coming from backend to display them for elements using messageBag.append():
vue
<Vueform @response="(response, form$) => {
// Clear custom element errors
Object.values(form$.elements$).forEach((el$) => {
el$.messageBag.clear()
})
// Display custom errors for elements
if (response.data.errors) {
Object.keys(response.data.errors).forEach((elName) => {
if (form$.el$(elName)) {
form$.el$(elName).messageBag.append(response.data.errors[elName][0])
}
})
}
}" />
