NextJS Part 2 Issue Tracker, Creating Issues -> Client-side Validation: "Description is required" custom error message does not render during client side validation

Similar to what Mosh shows us at the 15sec mark in the video titled, “Implementing Client-side Validation” in “Creating Issues” section, I added a custom error msg for the title and description properties in createIssueSchema:

export const createIssueSchema = z.object({
  title: z.string().min(1, 'Title is required.').max(255),
  description: z.string().min(1, 'Description is required.'),

Also, I tried this, which comes from zod docs: Zod | Documentation

import { z } from 'zod';

export const createIssueSchema = z.object({
  title: z.string().min(1, { message: 'Title is required.' }).max(255),
  description: z.string().min(1, { message: 'Description is required.' }),

However, Description is required is not rendering on the page. Instead, it’s just rendering Required.
I also noticed that at 5:31 timestamp in the the “Implementing Client-side Validation” video that Mosh also renders the non-custom error message, Required, instead of Description is required.

Any idea why the custom error message for title renders as expected but not description?

The reason you’re not seeing your custom error message is because when the form is submitted, it is submitting the description as undefined.

To fix this, add a defaultValue attribute to the Controller tag like this:

  render={({ field }) => (
    <SimpleMDE placeholder="Description" {...field} ref={null} />
1 Like

Ah ok, that worked. Thank you