In the frontend I have a form, let’s say like this (very simplified example):
TYPE OF PRODUCT
DATE RELEASE
The detail is that this form can change labels for the inputs, then for another case (in another url) this same form would look like this:
TYPE OF INFORMATION
DATE RELEASE
The inputs TYPE OF PRODUCT and TYPE OF INFORMATION have the same id in the frontend but different values and in the backend the validation and data handling is the same for both (even if they are from different url’s).
So suppose the user entered the wrong data in form A and the backend would respond with a message like this:
The field “TYPE OF PRODUCT” does not support symbols.
But in form B the message should look like this:
The “TYPE OF INFORMATION” field does not support symbols.
How do I dynamize those labels in the error messages?
My current solution is that from the frontend I send in the header:
-The source url (to know the type of form).
-An object with the id’s of all the form and the labels that corresponds to each id, as it is seen in the object IdAndLabels.
let IdAndLabels = {
// expected output in form A:
// "data_type": "TYPE OF PRODUCT",
//
// expected output in form B:
// "data_type": "TYPE OF INFORMATION",
//
"data_type": data_type.labels[0].innerText,
}
In the backend I would read the header and with the IdAndLabels map I would build the error message.
What do you think about this approach?, is there a better idea? I guess I don’t really like the idea of splitting the logic in the frontend and in the backend to build the error message.
Just in case I can’t do this on the form (which would be ideal but the forms are large and such labels would be meaningless to the user):
TYPE OF PRODUCT/INFORMATION
DATE RELEASE