Course Content
Expert React
Expert React
4. Formik
6. Next Steps
Form Validation
Step 9: Add form validation
Let's implement form validation using Formik to ensure that the form fields meet specific criteria and display appropriate error messages when necessary. We will utilize the validate
property provided by the Formik instance. Let's examine the code below:
Code explanation:
- Line 9: The
validate
property specifies a validation function that checks the values of the form fields. - Line 12-14: If the username field is empty, the error message
Name can't be empty
is added to theerrors
object. - Line 16-18: If the occupation field is empty, the error message
Occupation can't be empty
is added to theerrors
object. - Line 33-35, 43-45: Conditional rendering is used to display error messages. If
formik.errors.username
orformik.errors.occupation
is truthy, the error message is displayed using the<span>
element.
Note
Formik simplifies form validation by providing a convenient way to handle errors and display error messages. By utilizing the
validate
property and conditional rendering, we can ensure that the form fields meet the required criteria and provide meaningful feedback to users.
Complete code
Everything was clear?