DEV Community

Marc Philippe Beaujean
Marc Philippe Beaujean

Posted on

React Form Submission Handling - anyone got advice?

I keep finding myself rewritting the same ol' submission logic for each form, with slight changes depending on the contents - however, each time, I write my logic into a separate script that looks really similar to the previous. Something along these lines:

  • Disable the submission button
  • Check and validate all the inputs
  • Dispatch a post request
  • Display the server errors if there was mistake,otherwise redirect/create a notification

Anyone able to help me out by sharing their solutions? Form submission patterns or frameworks to help me keep this a bit more dry are much appreciated 😄

Top comments (4)

Collapse
 
nickytonline profile image
Nick Taylor • Edited

Formik is solid. We used it where I used to work.

GitHub logo jaredpalmer / formik

Build forms in React, without the tears 😭

Formik.js

Build forms in React, without the tears

Stable Release Blazing Fast gzip size license Discord Join the community on Spectrum

Visit jaredpalmer.com/formik to get started with Formik.


The below readme is the documentation for the canary (prerelease) version of Formik. To view the documentation for the latest stable Formik version visit jaredpalmer.com/formik/docs


Let's face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and often have a significant performance cost associated with them. Formik is a small library that helps you with the 3 most annoying parts:

  1. Getting values in and out of form state
  2. Validation and error messages
  3. Handling form submission

By colocating all of the above in one place, Formik will keep things organized--making testing, refactoring, and reasoning about your forms a breeze.

Docs

In-browser Playgrounds

You can play with Formik in your web browser with these live online


There is also Final Form, although I’ve never used it myself.

GitHub logo final-form / react-final-form

🏁 High performance subscription-based form state management for React

💰 Wanna get paid the big bucks writing React? Take this quiz and get offers from top tech companies! 💰


🏁 React Final Form

React Final Form

Backers on Open Collective Sponsors on Open Collective NPM Version NPM Downloads Build Status codecov.io styled with prettier

✅ Zero dependencies

✅ Only peer dependencies: React and 🏁 Final Form

✅ Opt-in subscriptions - only update on the state you need!

✅ đŸ’„ 3.0k gzipped đŸ’„


💬 Give Feedback on React Final Form 💬

In the interest of making 🏁 React Final Form the best library it can be, we'd love your thoughts and feedback.

Take a quick survey.


React Final Form is a thin React wrapper for Final Form, which is a subscriptions-based form state management library that uses the Observer pattern, so only the components that need updating are re-rendered as the form's state changes.

Getting Started

Philosophy

Examples

API

FAQ




In terms of posting the form and processing errors, it sounds like you’ve done the same thing a bunch of times. Maybe just create little helpers for that.

Collapse
 
marcbeaujean profile image
Marc Philippe Beaujean

Formik seems exactly like what I'm looking for - thanks, I'll check it out 😊

Collapse
 
jimmymcbride profile image
Jimmy McBride

Formik is leet đŸ”„

Collapse
 
josemunoz profile image
José Muñoz

use Formik and stop re-writing logic, group it into re-usable pieces instead