As a developer, it\u2019s usually best to not reinvent the wheel. That\u2019s why the first step for implementing a solution is to look for existing solutions. And it\u2019s what React is all about \u2014 creating reusable components so we don\u2019t end up repeating ourselves.<\/p>\n\n\n\n\n\n\n\n
In this article, we\u2019re going to take a look at some of the most popular solutions for form management and validation in React.<\/p>\n\n\n\n
A roundup on React form solutions wouldn\u2019t be complete without Formik. With over 22k stars on GitHub<\/a>, it is basically the most popular library for building and managing forms in React. Formik is a scalable, performant, form helper with a minimal API. It handles form state management, validation, and error handling.<\/p>\n\n\n\n Here\u2019s how to use Formik in it\u2019s most basic form. The When The above example is nice, but it can get out of hand quickly on more complex forms. For that, we could use the Yup<\/a> library. Yup is a schema builder for parsing values and validating them. You can install it with the following command:<\/p>\n\n\n\n To use Yup, all you have to do is replace React Final Form is framework-agnostic form validation library with zero dependencies. Final Form<\/a> is the name of the actual library, while React Final Form is the React wrapper. It is subscription-based, so only the specific form fields will get updated when the form state is updated.<\/p>\n\n\n\n There are two ways of validating forms with React Final Form \u2014 record-level<\/a> and field-level<\/a>. Record level is pretty much the same as how it\u2019s done with Formik. And just like Formik, you can also easily use Yup for implementing validation rules. The way you validate your form depends on how complex your form is. If your form is fairly simple, you can stick with field-level validation. Otherwise, use record-level.<\/p>\n\n\n\n Here\u2019s an example of record-level validation using Yup. This requires us to use the And here\u2019s how it\u2019s done using field-level validation:<\/p>\n\n\n\n Unform is a performance-focused form library for React. It does so by using uncontrolled form components.<\/p>\n\n\n\n Unform requires you to create your own custom component where you use the Once you have a custom component, you can now include it in your form. Unform uses a Note: If you\u2019re planning to explore this library further, be sure to only follow tutorials that uses version 2. Better yet, just stick to the official docs<\/a>. This is because there are some tutorials that use version 1. You can quickly determine that it\u2019s using version 1 because it uses custom form components. Version 2 embraces the use of primitive HTML elements. Check out the migration guide<\/a> for more information.<\/p><\/blockquote>\n\n\n\n React Form provides Hooks for managing form state and validating forms in React.<\/p>\n\n\n\n The way you use React Form is similar to how you use Unform so you first have to create a custom field component that uses the To validate the field, you pass an object containing the validation function:<\/p>\n\n\n\n Once you have a custom field component, you can now use the A simple React component that allows you to build and validate HTML forms using JSON schema. It ships with simple form validation by default. Validation rules such as It currently supports Bootstrap and Material UI for HTML form semantics. But you can use your own HTML form template as well<\/a>.<\/p>\n\n\n\n This library is very flexible when it comes to building forms. The only disadvantage is that there\u2019s a bit of a learning curve needed to fully use it because you\u2019re essentially using an API to build forms.<\/p>\n\n\n\n There are two built-in themes that you can use with this library. By default, there\u2019s Bootstrap:<\/p>\n\n\n\n But if you want to use Material UI, install the following instead:<\/p>\n\n\n\n Using the library is a three-step process:<\/p>\n\n\n\n When you specify your schema, you can add the data type, label, and optionally a custom format that the user input needs to follow. If any of your fields have a custom format, you also need to supply the React Hook Form is a lightweight React form validation library that mainly uses Hooks to add form validation to HTML input elements. Choose this library if you\u2019re looking for a modern form validation library that\u2019s very performant and easy to use.<\/p>\n\n\n\n Out of all the libraries mentioned in this post. React Hook Form has the least amount of code you have to write in order to use it. It\u2019s only a two-step process \u2014 use the Hook then add a ref to your fields.<\/p>\n\n\n\n Another great thing about this library is that it has very good documentation<\/a> with lots of examples<\/a>. You can find guides on almost any use case you can think of such as integrating with an existing form, or how to use it with UI libraries like Material UI.<\/p>\n\n\n\n The Redux Form allows you to manage your form state (form input values, form errors, etc.) by means of Redux. Redux Form uses the store for keeping track of form state, thus the main disadvantage of this library is its performance. Even if you\u2019re already using Redux in your application, only use it if you need tight coupling between your existing Redux state and your form data.<\/p>\n\n\n\n To use Redux Form, you need to extract the To create an input field, you use the To bring it all together, include the Formsy is a form input builder and validator for React. It uses simple syntax for form validation rules. It also includes handlers for different form states such as Formsy has a similarity with Unform as it requires you to create your own custom component that\u2019s wrapped with the Once you\u2019ve created a custom component, you can now use it in your forms. To create a form, you should use the Simple React Validator is a Laravel-inspired<\/a> React form validation library. Out of all the libraries we\u2019ve gone through in this article, this one has the biggest collection of built-in validation rules<\/a>.<\/p>\n\n\n\n The example in the GitHub repo doesn\u2019t really use Hooks so you have to dig a bit deeper to find out how to use it with Hooks. In the code below, you can see that it mainly uses controlled components so you have to manage the form state independently. Another downside of this library is that you have to use If you\u2019re starting a new project or is simply looking for a modern and actively maintained library, it\u2019s best to avoid the following libraries. These libraries are either no longer being actively maintained or use an outdated React API:<\/p>\n\n\n\n Here\u2019s a list of other form libraries to explore. These are mostly doing the same thing as the libraries we\u2019ve gone through so I\u2019ll just leave you to explore them for yourself:<\/p>\n\n\n\n In this article, we\u2019ve taken a look at some of the most popular and interesting React form validation libraries out there. As you have seen, most of them have a similar intuitive API for managing forms and validation errors. Each one has its own pros and cons based on your needs. But for most cases, you won\u2019t go wrong with either Formik, React Final Form, or React Hook Form.<\/p>\n\n\n\n This article was simply a roundup of form solutions available for React. If you need a more technical comparison, be sure to read the following \u2014 React Hook Form vs. Formik: A technical and performance comparison<\/a>.<\/p>\n\n\n\n Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you\u2019re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket<\/a>. <\/a><\/a><\/p>\n\n\n\nInstallation<\/h3>\n\n\n\n
yarn add formik<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
useFormik<\/code> Hook is where all the goodness is encapsulated. To use it, it only requires you to pass in the initialValues<\/code> which is an object containing the default values of each of your form fields. And the onSubmit<\/code> handler which gets called when the form validation passes.<\/p>\n\n\n\nuseFormik<\/code> is called, it returns the event handlers and form state which we could use to specify when to trigger form validation. The validation rules are added through the validate<\/code> property. A callback function is passed as the value for this property. And it\u2019s where you validate the individual form fields. The validation gets triggered on the onChange<\/code> event of every field. This means that by default, when the user updates the value for the first field, all the other fields in the form will have its validation code get triggered as well. We don\u2019t really want that, that\u2019s why we need to extract the handleBlur<\/code> and touched<\/code> from the return object of useFormik<\/code>. The former allows us to listen for blur events from the fields, while the latter allows us to check whether the user has already visited the field. From there, we can just check for the errors through the errors<\/code>:<\/p>\n\n\n\nimport React from \"react\";\nimport { useFormik } from \"formik\";\n\nfunction FormikComponent() {\n function validate(values) {\n const errors = {};\n if (!values.favoriteFood) {\n errors.favoriteFood = \"Required\";\n }\n\n if (!values.favoritePlace) {\n errors.favoritePlace = \"Required\";\n }\n return errors;\n }\n\n const {\n handleSubmit,\n handleChange,\n handleBlur,\n touched,\n values, \/\/ use this if you want controlled components\n errors,\n } = useFormik({\n initialValues: {\n favoriteFood: \"\",\n favoritePlace: \"\",\n },\n validate,\n onSubmit: (values) => {\n console.log(JSON.stringify(values));\n \/\/ values = {\"favoriteFood\":\"ramen\",\"favoritePlace\":\"mountains\"}\n },\n });\n\n return (\n <form onSubmit={handleSubmit}>\n <label htmlFor=\"favoriteFood\">Favorite Food:<\/label>\n <input\n type=\"text\"\n name=\"favoriteFood\"\n onChange={handleChange}\n onBlur={handleBlur}\n \/>\n {touched.favoriteFood && errors.favoriteFood\n ? <div>errors.favoriteFood<\/div>\n : null}\n\n <label htmlFor=\"favoritePlace\">Favorite place:<label>\n <input\n type=\"text\"\n name=\"favoritePlace\"\n onChange={handleChange}\n onBlur={handleBlur}\n \/>\n\n {touched.favoritePlace && errors.favoritePlace\n ? <div>errors.favoritePlace<\/div>\n : null}\n\n <button type=\"submit\">submit<\/button>\n <\/form> \n );\n}\n\nexport default App;<\/pre>\n\n\n\nyarn add yup<\/pre>\n\n\n\n
validate<\/code> with validationSchema<\/code>. This is specifically created for Yup integration:<\/p>\n\n\n\nimport * as Yup from \"yup\";\n\nfunction App() {\n const schema = Yup.object({\n favoriteFood: Yup.string().required(\"Required\"),\n favoritePlace: Yup.string().required(\"Required\"),\n });\n\n const { ... } = useFormik = ({\n \/\/ ...\n validationSchema: schema \/\/ replace validate with this\n });\n}<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
React Final Form<\/a><\/h2>\n\n\n\n
Installation<\/h3>\n\n\n\n
yarn add final-form react-final-form<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
setIn<\/code> utility function from the Final Form library to transform the default error object into an object which uses dot-and-bracket syntax (e.g. people[0].name.first<\/code>). In the code below, you can see that the way it works is similar to Formik. Though it relies on the use of custom components (<Form><\/code> and <Field><\/code> to wrap the primitive HTML elements to provide it with state and input callbacks:<\/p>\n\n\n\nimport React from \"react\";\nimport { setIn } from \"final-form\";\nimport { Form, Field } from \"react-final-form\";\nimport * as Yup from \"yup\";\n\nconst schema = Yup.object({\n favoriteFood: Yup.string().required(\"Required\"),\n});\n\nconst validate = async (values) => {\n try {\n await schema.validate(values, { abortEarly: false });\n } catch (err) {\n const errors = err.inner.reduce((formError, innerError) => {\n return setIn(formError, innerError.path, innerError.message);\n }, {});\n\n return errors;\n }\n};\n\nconst onSubmit = (values) => {\n console.log(\"values: \", values);\n};\n\nfunction FinalFormComponent() {\n return (\n <Form\n onSubmit={onSubmit}\n validate={validate}\n render={({ handleSubmit, form, submitting, pristine, values }) => (\n <form onSubmit={handleSubmit}>\n <Field name=\"favoriteFood\">\n {({ input, meta }) => (\n <div>\n <label>Favorite Food<\/label>\n <input {...input} type=\"text\" placeholder=\"favoriteFood\" \/>\n {meta.error && meta.touched && <span>{meta.error}<\/span>}\n <\/div>\n )}\n <\/Field>\n <button type=\"submit\">submit<\/button>\n <\/form>\n )}\n \/>\n );\n}<\/pre>\n\n\n\nimport React from \"react\";\nimport { Form, Field } from \"react-final-form\";\n\nconst onSubmit = (values) => {\n console.log(\"values: \", values);\n};\n\nconst required = (value) => (value ? undefined : \"Required\");\n\nfunction FinalFormComponent() {\n return (\n <Form\n onSubmit={onSubmit}\n render={({ handleSubmit, form, submitting, pristine, values }) => (\n <form onSubmit={handleSubmit}>\n <div>\n <Field name=\"favoriteFood\" validate={required}>\n {({ input, meta }) => (\n <div>\n <label>Favorite Food<\/label>\n <input {...input} type=\"text\" placeholder=\"Favorite food\" \/>\n {meta.error && meta.touched && <div>{meta.error}<\/div>}\n <\/div>\n )}\n <\/Field>\n <\/div>\n <button type=\"submit\">submit<\/button>\n <\/form>\n )}\n \/>\n );\n}\n\nexport default FinalFormComponent;<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
Unform<\/a><\/h2>\n\n\n\n
Installation<\/h3>\n\n\n\n
yarn add @unform\/core @unform\/web yup<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
useField<\/code> Hook to access the field data and methods for interacting with the field. In the code below, we\u2019re only extracting error<\/code> and clearError<\/code> so we can display and clear the validation error message:<\/p>\n\n\n\nimport React, { useRef } from \"react\";\nimport { useField } from \"@unform\/core\";\nexport default function Input({ name, ...inputProps }) {\n const inputRef = useRef(null);\n const { error, clearError } = useField(name);\n\n return (\n <>\n <input ref={inputRef} onFocus={clearError} {...inputProps} \/>\n {error && <span>{error}<\/span>}\n <\/>\n );\n}<\/pre>\n\n\n\nForm<\/code> component as a container for form fields. This is where you add the ref<\/code> and onSubmit<\/code> handler. In the example below, we\u2019re also using Yup for validation. Unform doesn\u2019t include it\u2019s own validation library so you can use whichever you want for validating your forms:<\/p>\n\n\n\nimport React, { useRef } from \"react\";\nimport * as Yup from \"yup\";\n\nimport { Form } from \"@unform\/web\";\nimport Input from \".\/components\/Input\";\n\nfunction UnformComponent() {\n const formRef = useRef(null);\n\n async function handleSubmit(data) {\n try {\n formRef.current.setErrors({});\n const schema = Yup.object().shape({\n email: Yup.string().email().required()\n });\n await schema.validate(data, {\n abortEarly: false,\n });\n console.log(data);\n\n } catch (err) {\n const validationErrors = {};\n if (err instanceof Yup.ValidationError) {\n err.inner.forEach((error) => {\n validationErrors[error.path] = error.message;\n });\n formRef.current.setErrors(validationErrors);\n }\n }\n }\n\n return (\n <Form ref={formRef} onSubmit={handleSubmit}>\n <Input name=\"email\" type=\"email\" \/>\n <button type=\"submit\">submit<\/button>\n <\/Form>\n );\n}\n\nexport default UnformComponent;<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
@unform\/mobile<\/code> package<\/li>useField<\/code> API<\/li>React Form<\/a><\/h2>\n\n\n\n
Installation<\/h3>\n\n\n\n
yarn add react-form<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
useField<\/code> Hook. This provides you with properties that store the field errors. Oftentimes, you\u2019ll only want to display errors once the user has already \u201ctouched\u201d the specific field. This is what the isTouched<\/code> property allows you to check.<\/p>\n\n\n\nimport React from \"react\";\nimport { useField } from \"react-form\";\n\nfunction Field({ name }) {\n const {\n value = \"\",\n meta: { error, isTouched },\n getInputProps,\n } = useField(name, {\n validate: (value) => {\n if (!value) {\n return `${name} is required.`;\n }\n return false;\n },\n });\n\n return (\n <>\n <input type=\"text\" {...getInputProps()} value={value} \/>\n {isTouched && error ? <span>{error}<\/span> : null}\n <\/>\n );\n}\n\nexport default Field;<\/pre>\n\n\n\nuseForm<\/code> Hook to validate your form. Note the Form<\/code> component is extracted from useForm<\/code>:<\/p>\n\n\n\nimport React from \"react\";\nimport { useForm } from \"react-form\";\nimport Field from \".\/components\/Field\";\n\nfunction ReactFormComponent() {\n const {\n Form,\n meta: { isSubmitting },\n } = useForm({\n onSubmit: async (values, instance) => {\n console.log(\"submit: \", values);\n },\n });\n\n return (\n <Form>\n <label>\n Favorite Food: <Field name={\"favoriteFood\"} \/>\n <\/label>\n\n <div>\n <button type=\"submit\">Submit<\/button>\n <\/div>\n <\/Form>\n );\n}\n\nexport default ReactFormComponent;<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
useForm<\/code><\/li>react-json-schema-form<\/a><\/h2>\n\n\n\n
required<\/code> and minLength<\/code> are built into it. If you want to use more advanced validation rules, you\u2019ll have to write them on your own.<\/p>\n\n\n\nInstallation<\/h3>\n\n\n\n
yarn add @rjsf\/core<\/pre>\n\n\n\n
yarn add @rjsf\/material-ui<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
customFormats<\/code> prop to the Form<\/code> component. By default, the form will only be validated when the user submits. But you can also set the liveValidate<\/code> prop to true<\/code> so that it will validate the fields as the user inputs data. For custom validation, you can supply the validate<\/code> prop. This is the validation function to be used for validating specific fields in your form. Lastly, the onSubmit<\/code> function will only get executed once all the fields have passed validation:<\/p>\n\n\n\nimport React, { Component } from \"react\";\nimport { render } from \"react-dom\";\nimport Form from \"@rjsf\/core\";\n\nconst schema = {\n type: \"object\",\n required: [\"email\", \"age\"],\n properties: {\n email: { type: \"string\", email: \"Email Address\", format: \"email_address\" },\n age: { type: \"number\" },\n done: { type: \"boolean\", title: \"Done?\", default: false },\n },\n};\n\nconst customFormats = {\n email_address: \/\\S+@\\S+\\.\\S+\/,\n};\n\nfunction validate(formData, errors) {\n if (formData.age < 18) {\n errors.age.addError(\"You should be 18 years old or older.\");\n }\n return errors;\n}\n\nconst onSubmit = ({ formData }, e) => console.log(\"submit: \", formData);\n\nfunction ReactJsonSchemaComponent() {\n return (\n <Form\n schema={schema}\n onSubmit={onSubmit}\n liveValidate={true}\n noHtml5Validate={true}\n showErrorList={false}\n customFormats={customFormats}\n validate={validate}\n \/>\n );\n}\n\nexport default ReactJsonSchemaComponent;<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
React Hook Form<\/a><\/h2>\n\n\n\n
Installation<\/h3>\n\n\n\n
yarn add react-hook-form<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
useForm<\/code> Hook provides all the data and methods required to implement form validation. First, you need to pass the name<\/code> attribute which serves as the key to uniquely identify your input. Then pass a ref<\/code> that uses the register<\/code> function. This is what registers the uncontrolled component into the Hook. It requires you to pass the validation rules you need. Optionally, you can also pass the error message you want to show via the message<\/code> property. In the example below, we used the required<\/code> and pattern<\/code> rule to validate an email field:<\/p>\n\n\n\nimport React from 'react';\nimport { useForm } from \"react-hook-form\";\n\nfunction ReactHookFormComponent() {\n const { register, handleSubmit, errors } = useForm();\n const onSubmit = data => console.log(data);\n \/\/ {\"email\":\"abc@gmail.com\"}\n\n return (\n <form onSubmit={handleSubmit(onSubmit)}>\n <input name=\"email\" ref={register({ required: true, pattern: \/\\S+@\\S+\\.\\S+\/ })} \/>\n {errors.email?.type === 'required' && <span> This field is required<\/span>}\n {errors.email?.type === 'pattern' && <span> Invalid email<\/span>}\n\n <button type=\"submit\">submit<\/button>\n <\/form>\n );\n}\n\nexport default ReactHookFormComponent;<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
required<\/code>, min<\/code>, max<\/code>, pattern<\/code>, and others<\/a><\/li>TextInput<\/code>)<\/li>Redux Form<\/a><\/h2>\n\n\n\n
Installation<\/h3>\n\n\n\n
yarn add redux-form redux react-redux<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
Field<\/code> component and the reduxForm<\/code> higher-order component from redux-form<\/code>. At a minimum configuration, all you need is to pass a unique name for the form (in this case it\u2019s bio<\/code>). But here, we\u2019re also passing in a validation function. This gets executed when the user submits the form.<\/p>\n\n\n\nField<\/code> component. Here, we pass in the type<\/code>, name<\/code>, component<\/code> to be used for rendering, and the label<\/code>. The renderField()<\/code> function is responsible for returning the input component. Aside from rendering the label and input, it also renders the error messages. This is made possible by Redux Form\u2019s Field<\/code> component:<\/p>\n\n\n\nimport React from 'react';\nimport { Field, reduxForm } from 'redux-form';\n\nconst validate = values => {\n const errors = {}\n if (!values.name) {\n errors.name = 'Required';\n }\n\n if (!values.email) {\n errors.email = 'Required';\n } else if (!\/\\S+@\\S+\\.\\S+\/i.test(values.email)) {\n errors.email = 'Invalid email address'\n }\n return errors;\n}\n\nconst renderField = ({\n input,\n label,\n type,\n meta: { touched, error }\n}) => (\n <div>\n <label>{label}<\/label>\n <div>\n <input {...input} placeholder={label} type={type} \/>\n {touched && (error && <span>{error}<\/span>)}\n <\/div>\n <\/div>\n);\n\nlet BioForm = props => {\n const { handleSubmit } = props;\n return (\n <form onSubmit={handleSubmit}>\n <div>\n <Field type=\"text\" name=\"name\" component={renderField} label=\"Name\" \/>\n <\/div>\n <div>\n <Field type=\"email\" name=\"email\" component={renderField} label=\"Email\" \/>\n <\/div>\n <button type=\"submit\">Submit<\/button>\n <\/form>\n );\n}\n\nBioForm = reduxForm({\n form: 'bio',\n validate\n})(BioForm);\n\nexport default BioForm;<\/pre>\n\n\n\nformReducer<\/code> to your existing reducers then pass an onSubmit<\/code> handler to your form component:<\/p>\n\n\n\nimport React, { Component } from 'react';\nimport { createStore, combineReducers } from 'redux';\nimport { reducer as formReducer } from 'redux-form';\nimport { Provider } from 'react-redux';\nimport BioForm from '.\/components\/BioForm';\n\nconst rootReducer = combineReducers({\n \/\/ your existing reducers..\n form: formReducer\n});\n\nconst store = createStore(rootReducer);\n\nclass ReduxFormComponent extends Component {\n submit = values => {\n console.log('submit: ', values);\n }\n\n render() {\n return (\n <Provider store={store}>\n <BioForm onSubmit={this.submit} \/>\n <\/Provider>\n );\n }\n}\n\nexport default ReduxFormComponent;<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
Formsy<\/a><\/h2>\n\n\n\n
onSubmit<\/code> and isValid<\/code>. Formsy is a good choice if you\u2019re looking for an all in one solution for building and managing forms. Though the biggest downside with this library is that it doesn\u2019t support React Hooks.<\/p>\n\n\n\nInstallation<\/h3>\n\n\n\n
yarn add formsy-react<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
withFormsy<\/code> higher-order component. This provides all the properties and methods required to manipulate the input component and conditionally display error messages:<\/p>\n\n\n\nimport React, { Component } from 'react';\nimport { withFormsy } from 'formsy-react';\n\nclass FormsyInput extends Component {\n constructor(props) {\n super(props);\n this.changeValue = this.changeValue.bind(this);\n }\n\n changeValue(event) {\n this.props.setValue(event.currentTarget.value);\n }\n\n render() {\n const errorMessage = this.props.errorMessage;\n\n return (\n <div>\n <input onChange={this.changeValue} type=\"text\" value={this.props.value || ''} \/>\n <span>{!this.props.isPristine ? errorMessage : ''}<\/span>\n <\/div>\n );\n }\n}\n\nexport default withFormsy(FormsyInput);<\/pre>\n\n\n\nFormsy<\/code> component. This requires the onValidSubmit<\/code> prop. This only gets executed if all the form fields has a valid input. In the example below, we used the isEmail<\/code> validator, but there are many others<\/a> you can use:<\/p>\n\n\n\nimport React, { Component } from 'react';\nimport Formsy from 'formsy-react';\nimport FormsyInput from '.\/components\/FormsyInput';\n\nexport default class App extends Component {\n\n submit(model) {\n console.log('valid form: ', model);\n \/\/ {email: \"abc@gmail.com\"}\n }\n\n render() {\n return (\n <Formsy onValidSubmit={this.submit}>\n <FormsyInput name=\"email\" validations=\"isEmail\" validationError=\"This is not a valid email\" required \/>\n <button type=\"submit\">\n Submit\n <\/button>\n <\/Formsy>\n );\n }\n}<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
isEmail<\/code> andisUrl<\/code><\/li>Simple React Validator<\/a><\/h2>\n\n\n\n
Installation<\/h3>\n\n\n\n
yarn add simple-react-validator<\/pre>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
forceUpdate<\/code> every time you need to show the error messages:<\/p>\n\n\n\nimport React, { useState, useRef } from \"react\";\nimport SimpleReactValidator from \"simple-react-validator\";\n\nfunction SimpleReactValidatorComponent() {\n const [email, setEmail] = useState(\"\");\n const simpleValidator = useRef(new SimpleReactValidator());\n const [, forceUpdate] = useState();\n\n const form = React.createRef();\n\n const submitForm = () => {\n const formValid = simpleValidator.current.allValid();\n if (!formValid) {\n simpleValidator.current.showMessages(true);\n forceUpdate(1)\n } else {\n console.log('submit form.');\n }\n };\n\n return (\n <form ref={form}>\n <label>Email<\/label>\n <input\n name=\"email\"\n type=\"text\"\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n onBlur={() => {\n simpleValidator.current.showMessageFor(\"email\")\n forceUpdate(1);\n }}\n \/>\n\n {simpleValidator.current.message(\"email\", email, \"required|email\")}\n <button type=\"button\" onClick={submitForm}>submit<\/button>\n <\/form>\n );\n}\n\nexport default SimpleReactValidatorComponent;<\/pre>\n\n\n\nSummary<\/h3>\n\n\n\n
Form validation libraries to avoid<\/h2>\n\n\n\n
Other form libraries<\/h2>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Full visibility into production React apps<\/h2>\n\n\n\n