Isomorphic Validation

[cleverbeagle]

This has been on my mind for awhile and needs some attention. Currently, our validation is split between jQuery Validation on the client and (as of 2.0) our GraphQL schema on the server. Ideally, we can simplify this by having a single layer of validation that covers both client/server.

This is a big project so will have to come after 2.0 but want to make note of it now so it's on our radar.

[cleverbeagle]

Note: storing validation code in another file as a pattern? We're adding the <Validation /> component in 2.0 but that's based on jQuery Validation. Validation can get kind of hefty so this might be nice.

[cleverbeagle]

Possible API:

<Validation
  rules={{
    '[name="cssSelector"] or React Ref': [
      { rule: 'required', message: 'This field is required.' },
      { rule: 'email', message: 'This field must be an email.' },
      { rule: (input) => { return input > 0; }, message: 'This must be a number greater than 0.' },
    ]
  }}
>
{/* Form to validate */}
</Validation>

[sabativi]

What about using https://github.com/vazco/uniforms/ ?
It can take schema definition as a starter for building and validating form.

[cleverbeagle]

This looks neat, I'll take a look @sabativi :)

[cleverbeagle]

Flagging this as a 2.1 thing to motivate research but may end up moving it to later release based on results.

[ArchiCroc]

@cleverbeagle I've used uniforms for one of my past projects and I started work on an example of what uniforms might look like in Pup. See https://github.com/ArchiCroc/pup/tree/feature/uniforms.

[cleverbeagle]

Thanks for sharing @ArchiCroc :) I'll take a look.

[ayhid]

I've used both https://github.com/vazco/uniforms/ and https://jaredpalmer.com/formik/ and I've to say the latter was a way more flexible when it comes to complex forms.

Now each time I start a new pup project I remove the Validation component and install formik with yup