Next.js Discord

Discord Forum

I don't think I'm getting the proper functionality with form validation (chapter 14 of the tutorial)

Answered
Pyrenean Mountain Dog posted this in #help-forum
Open in Discord
Pyrenean Mountain DogOP
I'm not sure it explicitly says it but I thought the expected result after completing [Chapter 14 of the Dashboard App Tutorial](https://nextjs.org/learn/dashboard-app/improving-accessibility) is that an error message would be seen in the browser if any of the 3 fields (customer name, amount, or status) were empty or unselected and attempt to submit the form. Currently no eslint errors appear (so nothing to go off to know what to correct) but when creating a new invoice only the first field where you select a customer name can be triggered. This is done by clicking the Create Invoice button with an empty form. If I select the customer name but do not fill in the amount or select the status and click the button there is no error message seen (there is no indication of anything happening, actually).

Lines 141 - 153 (code that was instructed in chapter 14) makes me think that a message should be given if any one of the fields is not filled correctly. Am I mistaking what the behavior is supposed to be or is something not working?

[Paste of my files](https://dpaste.org/uLXw9#L141,153)
Answered by Toyger
(there is none in the solution code (shown above)
yeah because it's too much code that unecessary for current chapter, so they just omit it.
you can check final code here https://github.com/vercel/next-learn/blob/646898bc52d2bc22be9019871cf111e31b29d147/dashboard/final-example/app/ui/invoices/edit-form.tsx
View full answer

4 Replies

Pyrenean Mountain DogOP
In fact there is more than one thing doesn't make sense in that chapter of the lesson.
in https://nextjs.org/learn/dashboard-app/improving-accessibility#practice-adding-aria-labels (the last section of that chapter the first code shown in the solution is..

 /app/ui/invoices/edit-form.tsx
export default function EditInvoiceForm({
  invoice,
  customers,
}: {
  invoice: InvoiceForm;
  customers: CustomerField[];
}) {
  const initialState = { message: null, errors: {} };
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
  const [state, dispatch] = useFormState(updateInvoiceWithId, initialState);
 
  return <form action={dispatch}></form>;
}


but /app/ui/invoices/edit-form.tsx currently contains a lot of components and html (there is none in the solution code (shown above); and, looking at the existing code in that file as well as comparing it with the finished code in /app/ui/invoices/create-form.tsx which has all the components and html in its finished state - and it seems like /app/ui/invoices/edit-form.tsx should not have much of what's there removed (it looks like something that is needed / necessary).
Answer
Pyrenean Mountain DogOP
@Toyger thanks. I did use that to add see how to complete my code and get complete coverage.