This is a migrated thread and some comments may be shown as answers.

Programmaticaly show error message on field

5 Answers 21 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Marco
Top achievements
Rank 1
Marco asked on 25 Jan 2021, 07:56 PM

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

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 27 Jan 2021, 04:37 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Marco
Top achievements
Rank 1
answered on 27 Jan 2021, 07:13 PM

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

0
Stefan
Telerik team
answered on 28 Jan 2021, 10:58 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Anthony
Top achievements
Rank 1
Veteran
answered on 19 Feb 2021, 08:35 PM

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

0
Stefan
Telerik team
answered on 22 Feb 2021, 06:23 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Marco
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Marco
Top achievements
Rank 1
Anthony
Top achievements
Rank 1
Veteran
Share this question
or