{"id":3177,"date":"2024-12-27T07:19:23","date_gmt":"2024-12-27T07:19:23","guid":{"rendered":"https:\/\/www.skybridgeinfotech.com\/blog\/?p=3177"},"modified":"2025-01-03T13:00:33","modified_gmt":"2025-01-03T13:00:33","slug":"passing-sitecore-fields-to-form-validation-schema-in-sitecore-headless-solution","status":"publish","type":"post","link":"https:\/\/www.skybridgeinfotech.com\/blog\/passing-sitecore-fields-to-form-validation-schema-in-sitecore-headless-solution\/","title":{"rendered":"Passing Sitecore Fields to Form Validation Schema in Sitecore Headless Solution"},"content":{"rendered":"\n

Passing Sitecore Fields to Form Validation Schema in Sitecore Headless Solution<\/strong><\/h2>\n\n\n\n

In a Sitecore Headless Solution, you often need to integrate dynamic content from Sitecore into forms, such as passing Sitecore fields to a form validation schema. While accessing Sitecore item fields within a component is straightforward when the schema is defined inside the component, reusing that schema across different components can present challenges. In this blog post, we will walk through two scenarios: one where the validation schema is defined inside the component function and another where it is defined outside the component function. We will also explore how to overcome the challenges of passing Sitecore fields to a schema defined outside the component.<\/p>\n\n\n\n

Scenario 1: Schema Defined Inside the Component Function<\/strong><\/p>\n\n\n\n

In the first scenario, we define a simple form within the RegisterUser component, and the validation schema is declared inside the same component function. The form contains two fields: firstName and lastName, and each field has its own validation message fetched from Sitecore fields.<\/p>\n\n\n\n

Here\u2019s the code for this scenario:<\/strong><\/p>\n\n\n\n

tsx<\/p>\n\n\n\n

Copy code<\/p>\n\n\n\n

const RegisterUser = (props: RegistrationProps): JSX.Element => {<\/p>\n\n\n\n

  const schema = z.object({<\/p>\n\n\n\n

    firstName: z.string().nonEmpty({ message: props.fields.FirstNameValidation.value }),<\/p>\n\n\n\n

    lastName: z.string().nonEmpty({ message: props.fields.LastNameValidation.value }),<\/p>\n\n\n\n

  });<\/p>\n\n\n\n

  const form = useForm({<\/p>\n\n\n\n

    initialValues: {<\/p>\n\n\n\n

      firstName: ”,<\/p>\n\n\n\n

      lastName: ”,<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

    validate: zodResolver(schema),<\/p>\n\n\n\n

    validateInputOnBlur: true,<\/p>\n\n\n\n

  });<\/p>\n\n\n\n

  return <><\/>;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

In this example, the props.fields.FirstNameValidation.value and props.fields.LastNameValidation.value are passed to the schema for validation messages. Since the schema is defined inside the component, it’s easy to use dynamic data from Sitecore to populate the validation messages.<\/p>\n\n\n\n

Scenario 2: Schema Defined Outside the Component Function<\/strong><\/p>\n\n\n\n

Now, let\u2019s say we want to reuse the schema across different components. To achieve this, we move the validation schema outside the RegisterUser component and export it for reuse.<\/p>\n\n\n\n

Here\u2019s how the updated code looks:<\/strong><\/p>\n\n\n\n

tsx<\/p>\n\n\n\n

Copy code<\/p>\n\n\n\n

const schema = z.object({<\/p>\n\n\n\n

  firstName: z.string().nonEmpty({ message: ‘Please enter first name’ }),<\/p>\n\n\n\n

  lastName: z.string().nonEmpty({ message: ‘Please enter last name’ }),<\/p>\n\n\n\n

});<\/p>\n\n\n\n

export type RegistrationForm = z.infer<typeof schema>;<\/p>\n\n\n\n

const RegisterUser = (props: RegistrationProps): JSX.Element => {<\/p>\n\n\n\n

  const form = useForm({<\/p>\n\n\n\n

    initialValues: {<\/p>\n\n\n\n

      firstName: ”,<\/p>\n\n\n\n

      lastName: ”,<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

    validate: zodResolver(schema),<\/p>\n\n\n\n

    validateInputOnBlur: true,<\/p>\n\n\n\n

  });<\/p>\n\n\n\n

  return <><\/>;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

In this case, the validation messages are hardcoded, and we no longer have the flexibility to pass error messages from Sitecore, since the schema is defined outside the component. So, how do we pass dynamic Sitecore fields to this schema when it\u2019s defined outside the component?<\/p>\n\n\n\n

Solution: Convert the Schema to a Function<\/strong><\/p>\n\n\n\n

To solve this, we need to convert the schema into a function that accepts dynamic input, such as Sitecore field values. This way, we can still reuse the schema, while passing Sitecore-specific error messages to it.<\/p>\n\n\n\n

Here\u2019s the solution:<\/strong><\/p>\n\n\n\n

    \n
  1. Create a New Interface<\/strong>: Define an interface that contains only the necessary error messages from Sitecore. This improves readability and maintains separation of concerns.<\/li>\n\n\n\n
  2. Modify the Schema<\/strong>: Convert the schema into a function that accepts the error messages as input.<\/li>\n\n\n\n
  3. Pass the Sitecore Fields<\/strong>: Pass the Sitecore fields to the schema function from within the component.<\/li>\n<\/ol>\n\n\n\n

    tsx<\/p>\n\n\n\n

    Copy code<\/p>\n\n\n\n

    interface RegistrationFormErrors {<\/p>\n\n\n\n

      FirstNameValidation: Field<string>;<\/p>\n\n\n\n

      LastNameValidation: Field<string>;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    const schema = (props: RegistrationFormErrors) => {<\/p>\n\n\n\n

      return z.object({<\/p>\n\n\n\n

        firstName: z.string().nonEmpty({ message: props.FirstNameValidation.value }),<\/p>\n\n\n\n

        lastName: z.string().nonEmpty({ message: props.LastNameValidation.value }),<\/p>\n\n\n\n

      });<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    export type RegistrationForm = z.infer<ReturnType<typeof schema>>;<\/p>\n\n\n\n

    const RegisterUser = (props: RegistrationProps): JSX.Element => {<\/p>\n\n\n\n

      const form = useForm({<\/p>\n\n\n\n

        initialValues: {<\/p>\n\n\n\n

          firstName: ”,<\/p>\n\n\n\n

          lastName: ”,<\/p>\n\n\n\n

        },<\/p>\n\n\n\n

        validate: zodResolver(schema(props.fields)),<\/p>\n\n\n\n

        validateInputOnBlur: true,<\/p>\n\n\n\n

      });<\/p>\n\n\n\n

      return <><\/>;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    Explanation of the Solution<\/strong><\/p>\n\n\n\n