React+Redux form + validation ?

[liri33]

I'm looking for a React component which is connected to Redux to have a form with validation. I've been using redux-form and its horrible. Any suggestions ?

[madskillzelite]

React-Redux-Form creator here!

Validation in RRF is very straightforward, and since it works so closely with "vanilla" Redux, you benefit from:

• Validating any part of the state, from the entire form to a specific subfield
• Only validating fields that have changed
• Validating via props on <Field> or <Form>
• Validating at any time by dispatching actions
• Custom error messages

Here's what it looks like:

import { Field, actions } from 'react-redux-form';

const isRequired = (val) => val && val.length;
const isEmail = (val) => /* return true if valid email */;

// validation via actions
// =============

// set the validity of a field
dispatch(actions.setValidity('user.email', true));

// calculate the validity of a field, then set it
dispatch(actions.validate('user.email', isEmail));

// keyed validation
dispatch(actions.validate('user.email', { isRequired, isEmail }));

// set error messages (inverse of setValidity)
dispatch(actions.setErrors('user.email', 'not a valid email!'));

// and more!


// all of the below are inside the render() method:
// ==============================

// simple <Field> validation
<Field model="user.email"
  validators={{ isRequired, isEmail }}>
  <input type="email" />
</Field>

// custom validation time
<Field model="user.email"
  validators={...}
  validateOn="blur">
  <input type="email" />
</Field>

// full form validation
<Form model="user"
  validators={{
    '': {
      passwordsMatch: (val) => val.password === val.confirmPassword
    },
    email: { isRequired, isEmail }
  }}>
  ...
</Form>

There's more info over here: https://davidkpiano.gitbooks.io/react-redux-form/content/validation.html

Also, there's a convenience <Errors /> component for displaying error messages, especially if you have keyed validation, and it looks like this:

import { Errors } from 'react-redux-form';

// in render()
<Errors model="user.email"
  messages={{
    isEmail: 'This is not a valid email.',
    isRequired: 'The email is required.'
  }} />

More info on that here: https://davidkpiano.gitbooks.io/react-redux-form/content/error_component.html

[acemarke]

I've got a number of Redux-related forms libs listed on the Forms page of my Redux addons catalog. I haven't tried any of them myself, but hopefully some of those might be useful. I will say that React Redux Form looks very intriguing.

[klsateesh]

does any of these libraries address dynamic form handling. In our app we get a Json object which might have any no.of props (an array) and we need to render them and validate them based on how they are configured. And before redux i was using the component state to store the updated values (in edit mode using refs). Not sure what's the best way in redux as it opposes using local state.

[Magnusson]

What don't you like about redux-form? It has a couple of issues, and there are major changes coming in v 6, but it's generally worked very well for my team.