Formous - A package for React form validation and submission

announce
1

I went and built another thing. :wink:

Long story short: I’ve tried out a few different form packages for React, and none of them stuck. All I had were a few requirements:

  • Don’t make me spend an hour reading just to learn how to use it
  • I shouldn’t have to keep a reference guide handy, either :slight_smile:
  • Don’t take over any UI aspects of my app, just let me easily validate fields and once the form is valid, give me all the form fields in a JavaScript object
  • It should work with any UI framework: Bootstrap, Material UI, a custom solution, or just plain old HTML
  • Make error reporting easy too, and make it “disconnected,” in that the errors can appear anywhere on my page and aren’t tied to the form input if I don’t want them to
  • Be super simple—I get easily annoyed at over-engineered packages that ought to be simple

And so I built Formous, which meets all these requirements. It’s just a higher-order component. No Redux here (which IMO is overkill). You know there’s a bad trend occurring when the creator of Redux keeps having to advise people to really think about the architecture of their app before deciding to use Redux! :smiley:

I didn’t have time to work on detailed docs yet, but I will. I did include an example which should cover everything you’d ever want to know. It’s a first release, and very beta, but it’s a decent start.

10 Likes
2

Just updated to 0.7.1. Controlled inputs are now properly implemented, and default field values are possible!

3

Don’t even knew about such construction:
const { fields: { age, name }, formSubmit, } = this.props;
:slight_smile:

1 Like
4

I found four key places in your sample code to get Formous work: https://gist.github.com/strobox/146e8839dc25c623db1d6afe80197cd7
handleSubmit(formStatus, fields) { // 4 -> handle Formouse arguments passed to handler ... formSubmit, // 2 -> Export Formous validation function to current scope ... <form onSubmit={formSubmit(this.handleSubmit)}> // 3 -> wrap form event handler with Formous vailidation function ... export default Formous(fields)(MyComponent) // 1 -> wrap target component ....

Is I right? And what about css class names assignment to failed/empty/correct fields? Optional: live validation (on user input not submit)

5

@strobox I’m not really sure what you’re asking. It looks like you’re tracing the steps that Formous goes through… in which case, yes, you’ve got it right. :slight_smile:

As for the CSS class names, you can set failProps to whatever you want. For example:

// This syntax will change slightly in 0.8.0 BTW
const fields = {
  name: {
    tests: [
      {
        critical: true,
        failProps: {
          className: 'error-visible critical-error',
        },
        test(value) {
          return value !== '';
        },
      },
    ],
  },
};

And then you’d just apply the props to whatever you like:

  <input value={name.value} { ...name.events } />
  <div { ...name.failProps }>This is an error.</div>
6

Ok, I understand, thanks!