• 10 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 3/31/22

Practice: Add a validation message

Log in or subscribe for free to enjoy all this course has to offer!

Here's an exercise for you to try out what you just learned!

Every Product in our store should have a name. As it is, the product form can be submitted without a name, and it creates a new product with a blank line in the  name  column.

Change the  ProductForm  component so that it requires a 'name' field before submitting the results, and shows a message if you try to submit the form without a name value. When the user starts typing in the name field, the message should go away (but reappear if they delete all the characters in the name field!).

If you're not sure how to begin, try these four steps:

  1. Add a value to the component's state that represents whether the error is present.

  2. Add a validation function checks for the missing field, sets the error state, and returns a boolean expressing whether the form is valid.

  3. Run the validation function when the user submits the form, and don't allow the save to occur if the form is not valid.

  4. Add an error message in the view that will only appear if the error is present.

Example of certificate of achievement
Example of certificate of achievement