mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-08 03:00:28 -04:00
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:
@@ -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}
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user