Make the SPA show validation errors #50
Description
A validation error from our Data Model validation (AJV or Sequelize itself) shows up in the following format in the response:
{
"errors": [
{
"message": "validation failed",
"details": [
{
"keyword": "maximum",
"dataPath": ".collected_seeds",
"schemaPath": "#/properties/collected_seeds/maximum",
"params": {
"comparison": "<=",
"limit": 10,
"exclusive": false
},
"message": "should be <= 10"
}
],
"path": [
"addAccession"
]
}
],
"data": null
}
Make sure "global" errors are displayed as normal. Some validation errors are not linked to a specific attribute (field).
Parse the details array to extract the validation errors that are linked to specific fields and display the error message e.g. in red below the input element. Feel free to find a suitable style. See, how material design does this.
Note, that the above dataPath in the validation error tells you which attribute caused it. Use that information to associate the error to the respective attribute (field).
If you need further inspiration, see how it is done in our deprecated Vue.js template views/pages/formElements.ejs.