Programmaticaly show error message on field

[Marco]

Hi everyone

 

 

I have created a server side validation system, and I should hook it to my application made with KendoRect.

I'm looking for a method like:

setFieldError ('field', 'Message error');

to show the red error message in the correct form field.

Some idea?

 

Many thanks

[Stefan]

Hello, Marco,

I can suggest checking and commenting on this issue where we have listed this as one of the improvements:

https://github.com/telerik/kendo-react/issues/438

`Submit remote validations - workaround till feature is available: in this demo + validation debounce`

The issue also contains an example of a possible approach for server validation with the current state of the Form component.

Regards,
Stefan
Progress Telerik

[Marco]

Thanks for the link.
I had already found it, yet the proposed solution is not sufficient for my needs.
I have to show the errors *for each* field of the form.

Is there a place where I can post new feature requests?

 

In my opinion the Kendo component <Form> should expose a method to set the error of each field, like Formik.

 

    onSubmit( values, { setSubmitting, setFieldError } )

Many thanks

[Stefan]

Hello, Marco,

All feature requests can be posted in our feedback portal:

https://feedback.telerik.com/kendo-react-ui

As we already have a GitHub item for this logged (which is usually the next step after a feature is approved), I can recommend directly commenting inside the issue. The comment can be to describe the request and the use case.

Regards,
Stefan
Progress Telerik

[Anthony]

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

[Stefan]

Hello, Anthony,

Thank you for sharing this approach.

If there are any issues with it along the way, please let us know and we will be happy to assist.

Regards,
Stefan
Progress Telerik