Validating match of two password fields Redux-Form

Question

I have a registration form which consists of:

• Username
• Password
• Password verification

The user has to input the same password in both fields, or else an error message should appear underneath Password verification: "Passwords don't match"

I'm using Redux-Form and get wrap my head around how to create this verification.

I'm trying to use field level verification for that: field level verification

I also get the password value from redux:

const selector = formValueSelector('register');
const mapStateToProps = state => {
  return {
    password: selector(state, 'Password')
  };
};

So, I wrote the following validation function:

  const matchPasswords = pass1 =>pass2 => 
  pass1  !== pass2 ? 'Passwords don't match' : undefined;

And I pass it to the verification field like so:

 <Field
   name="username"
   type="text"
   component={renderField}
   label="Username"
   validate={[matchPasswords(this.props.password]}
 />

But it doesn't work. Any suggestions?

Answer 1

To add to @DM's answer, value and allValues args do not need to be passed in to this validation function from the parent component. Here is a complete example:

<Field /> Component:

...
<Field
  type="password"
  name="passwordConfirmation"
  validate={[required, passwordsMustMatch]} 
/>

passwordsMustMatch validation:

export const passwordsMustMatch = (value, allValues) => 
  value !== allValues.password ? 
    'Passwords do not match' :
     undefined