cov-kendo-form-error-summary

A React component that displays a validation error summary for KendoReact forms. When a form has validation errors, the component renders a styled error box listing all current field errors.

Features

• Displays all form validation errors in a single summary box
• Supports a generic VALIDATION_SUMMARY error for form-level messages
• Optional auto-scroll to the error summary on submit
• Compatible with React 18 and React 19

Install

npm install --save cov-kendo-form-error-summary

Peer Dependencies

• react ^18 || ^19

Usage

Basic

import { COVKendoFormErrorSummary } from "cov-kendo-form-error-summary";
import { Form, Field, FormElement } from "@progress/kendo-react-form";

<Form
  onSubmit={handleSubmit}
  initialValues={initialValues}
  render={(formRenderProps) => (
    <FormElement>
      <fieldset className="k-form-fieldset">
        <legend className="k-form-legend">My Form</legend>

        <COVKendoFormErrorSummary formRenderProps={formRenderProps} title="Please correct the following errors" />

        <Field name="email" label="Email" component={FormInput} />
        <Field name="name" label="Name" component={FormInput} />
      </fieldset>
    </FormElement>
  )}
/>;

With Auto-Scroll

When scrollToErrorSummary is true, the component will smoothly scroll the error summary into view after a failed submit. You must also provide a setScrollToErrorSummary callback to reset the flag.

const [scrollToErrorSummary, setScrollToErrorSummary] = React.useState(true);

function onSubmitClick(formValues) {
  if (!formValues.isValid) {
    setScrollToErrorSummary(true);
    return;
  }
  handleSubmit(formValues.values);
}

<Form
  onSubmitClick={onSubmitClick}
  initialValues={initialValues}
  validator={formValidation}
  render={(formRenderProps) => {
    return (
      <FormElement className="k-form row" noValidate={true}>
        <fieldset className="k-form-fieldset col-10">
          <COVKendoFormErrorSummary
            formRenderProps={formRenderProps}
            title={"Enter valid work request information"}
            scrollToErrorSummary={scrollToErrorSummary}
            setScrollToErrorSummary={setScrollToErrorSummary}
          />

      {/* ...fields... */}

        <Button
          id={"workRequestFormSubmit"}
          themeColor={"primary"}
          type={"submit"}
          disabled={submitting || fileUploading}
          iconClass={submitting || fileUploading ? "fa fa-spinner fa-spin" : ""}
        >
          {submitting ? "Sending your request" : "Send your request"}
        </Button>    </FormElement>
  )}
/>;

Props

| Prop | Type | Default | Required | Description | | ------------------------- | ---------- | -------------------------------- | ----------- | ------------------------------------------------------------------------------------------ | | formRenderProps | object | — | Yes | The render props object provided by the KendoReact <Form> component. | | title | string | "Please review your responses" | No | Heading text displayed above the error list. | | scrollToErrorSummary | boolean | false | No | When true, smoothly scrolls the error summary into view. | | setScrollToErrorSummary | function | — | Conditional | State setter to reset the scroll flag. Required when scrollToErrorSummary is true. |

How It Works

The component renders only when all of the following are true:

1. formRenderProps.valid is false
2. formRenderProps.allowSubmit is false
3. formRenderProps.errors is defined

It then iterates over the error keys, filtering out empty values, and renders each error as a list item. A special VALIDATION_SUMMARY key is rendered outside the list for form-level messages.

License

MIT © covnpmjs