Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
formik
Discontinued Build forms in React, without the tears 😭 [Moved to: https://github.com/jaredpalmer/formik]
-
The fact is, you don't have to do that. There is also the third option. There are libraries focused on helping with just one thing, such as form validation, and won't interfere with other things. One of these libraries is Yup. This library helps with validation of any kind, including forms.
This tutorial uses the create-react-app as the starting template. The react and react-dom dependencies are both version 17.0.2. The react-scripts is version 4.0.0. The yup library is the fourth dependency and it is version 0.32.9. The fifth and last dependency is immutability-helper, version 3.1.1.
There are multiple ways to solve the problem with form validation. The most basic and also most accessible is the native way. This is the validation provided by browsers. This validation works well if you use correct field types and don't need any customization. Then, there are bigger, all-in-one solutions, such as Formik.
This tutorial uses the create-react-app as the starting template. The react and react-dom dependencies are both version 17.0.2. The react-scripts is version 4.0.0. The yup library is the fourth dependency and it is version 0.32.9. The fifth and last dependency is immutability-helper, version 3.1.1.