Marco
I am currently trying to solve a very similar problem. I have a relatively simple signup form. While I do plan to do some basic client side validation, the REST endpoint will check all of the input and respond with a 400 status code.
In the respon body, I return the original request body and a collection of errors.
{
"code": "REQUIRED_FIELD",
"message": "Last name is required.",
"keyName": "last"
}
I tried setting the validationMessage, but that didn't work. I decided to try passing the server side error as custom prop "restErrorMessage". This FieldWrapper code was borrowed from some Kendo sample code.
<FieldWrapper>
<Label id={labelId} editorId={id} editorValid={!showError} editorDisabled={disabled} optional={optional}>{label}</Label>
<div className='k-form-field-wrap'>
<KendoInput
id={id}
placeholder={placeholder}
valid={valid}
validityStyles={showFieldValidation}
disabled={disabled}
ariaLabelledBy={labelId}
ariaDescribedBy={`${hintId} ${errorId}`}
maxLength={maxLength}
{...others}
/>
{showHint && <Hint id={hintId}>{hint}</Hint>}
{showError && <Error id={errorId}>{validationMessage}</Error>}
{showRestError && <Error id={errorId}>{restErrorMessage}</Error>}
</div>
</FieldWrapper>
Once the user types something in the field, I want to hide the error. We won't know it passed until the form is submitted again. I feel leaving this there can confuse some users. This is how I determine that.
const showRestError = !modified && restErrorMessage.
I may hit a roadblock, but this is the road I am traveling.
Anthony