fix(frontend): Add custom validator to handle short-text and long-text formats in form renderer (#11395)

The rfjs library was throwing validation errors for our custom format
types `short-text` and `long-text` because these are not standard JSON
Schema formats. This was causing form validation to fail even though
these formats are valid in our application context.

<img width="792" height="85" alt="Screenshot 2025-11-18 at 9 39 08 AM"
src="https://github.com/user-attachments/assets/c75c584f-b991-483c-8779-fc93877028e0"
/>

### Changes 🏗️

- Created a custom validator using `@rjsf/validator-ajv8`'s
`customizeValidator` function
- Added support for `short-text` and `long-text` custom formats that
accept any string value
- Replaced the default validator with our custom validator in the
FormRenderer component
- Disabled strict mode and format validation in AJV options to prevent
validation errors for non-standard formats

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Create an agent with input blocks that use short-text format
  - [x] Create an agent with input blocks that use long-text format
  - [x] Execute the agent and verify no validation errors appear
  - [x] Verify that form submission works correctly with both formats
- [x] Test that other standard formats (email, URL, etc.) still work as
expected
This commit is contained in:
Abhimanyu Yadav
2025-11-19 10:21:25 +05:30
committed by GitHub
parent 1154f86a5c
commit 184a73de7d
2 changed files with 16 additions and 2 deletions

View File

@@ -1,5 +1,4 @@
import { BlockUIType } from "@/app/(platform)/build/components/types";
import validator from "@rjsf/validator-ajv8";
import Form from "@rjsf/core";
import { RJSFSchema } from "@rjsf/utils";
import { fields } from "./fields";
@@ -7,6 +6,7 @@ import { templates } from "./templates";
import { widgets } from "./widgets";
import { preprocessInputSchema } from "./utils/input-schema-pre-processor";
import { useMemo } from "react";
import { customValidator } from "./utils/custom-validator";
type FormContextType = {
nodeId?: string;
@@ -37,7 +37,7 @@ export const FormRenderer = ({
<div className={"mt-4"}>
<Form
schema={preprocessedSchema}
validator={validator}
validator={customValidator}
fields={fields}
templates={templates}
widgets={widgets}

View File

@@ -0,0 +1,14 @@
import { customizeValidator } from "@rjsf/validator-ajv8";
export const customValidator = customizeValidator({
// Currently we do not have frontend side validation - we are only doing backend side validation
// If in future we need validation on frontend - then i will add more condition here like max length, min length, etc.
customFormats: {
"short-text": /.*/, // Accept any string
"long-text": /.*/,
},
ajvOptionsOverrides: {
strict: false,
validateFormats: false,
},
});