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

Next.js
1

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?

2

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:

<Controller
  name="description"
  defaultValue=""
  control={control}
  render={({ field }) => (
    <SimpleMDE placeholder="Description" {...field} ref={null} />
  )}
/>
1 Like
3

Ah ok, that worked. Thank you