Programmaticaly show error message on field

6 posts, 0 answers
  1. Marco
    Marco avatar
    2 posts
    Member since:
    Oct 2020

    Posted 25 Jan Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 27 Jan Link to this post

    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/.

  3. Marco
    Marco avatar
    2 posts
    Member since:
    Oct 2020

    Posted 27 Jan in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 28 Jan Link to this post

    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/.

  5. Anthony
    Anthony avatar
    13 posts
    Member since:
    Dec 2017

    Posted 19 Feb in reply to Marco Link to this post

    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

  6. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 22 Feb Link to this post

    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/.

Back to Top