How to pass custom props to validate function in redux-form?

Question

I am trying to create a validation function that returns errors if there is a input error clientside or if there is an error returned from the server.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Form, submit, reduxForm, Field } from 'redux-form';
import Modal from '../../ui/modal';
import { ACCOUNT_REGISTER_MODAL_ID } from './constants';
import registerRequest from './actions';
import CField from '../../ui/form/field';


function validate(values, props) {
  const errors = {};
  console.log('-');
  console.log(values);
  console.log(props);
  console.log('-');
  if (!errors.description && (!values.description || values.description.trim() === '')) {
    errors.description = 'Enter a Description';
  }
  if (!errors.username && (!values.username || values.username.trim() === '')) {
    errors.username = 'Enter a Username';
  }
  return errors;
}


class RegisterModal extends Component {

  static propTypes = {
    handleSubmit: PropTypes.func,
    fields: PropTypes.array,
    register: PropTypes.shape({
      requesting: PropTypes.bool,
      successful: PropTypes.bool,
      messages: PropTypes.array,
      errors: PropTypes.array,
      fieldErrors: PropTypes.array,
    }),
    dispatch: PropTypes.func,
  };

  onSubmit = (values) => {
    console.log(this.props);
    console.log(values);
  }

  getForm = () => {
    this.props.dispatch(submit('register'));
  }

  render() {
    const {
      handleSubmit,
      fields,
      register: {
        requesting,
        successful,
        messages,
        errors,
        fieldErrors,
      },
    } = this.props;
    console.log(fieldErrors);
    const required = value => value ? undefined : 'Required';
    return (
      <Modal
        modalID={ACCOUNT_REGISTER_MODAL_ID}
        header={'Connect Account'}
        submitText={'Connect'}
        onSubmitClick={this.getForm}
        register={this.register}
      >
        <Form
          className="ui form register"
          onSubmit={handleSubmit(this.onSubmit)}
          fieldErrors={fieldErrors}
        >
          <Field
            name="description"
            type="text"
            component={CField}
            label="Please give a recognizable name to this account"
            required
            placeholder="My main Account"
          />
          <Field
            name="username"
            type="text"
            component={CField}
            label="Please enter your username"
            required
            placeholder="foobar2017"
          />
        </Form>
      </Modal>
    );
  }
}

const mapStateToProps = state => ({
  register: state.RegisterModal,
});

const connected = connect(mapStateToProps, { registerRequest })(RegisterModal);
const formed = reduxForm({
  form: 'register',
  fields: ['description', 'username'],
  validate
})(connected);


export default formed;

None of the values passed to the validate function seems to contain the "fieldErrors" prop I passed into the Form component. I need to be able to pass the prop into the validate function so I can access the responses from the server received via redux.

Is there a different way that I should be creating my validation function?

Don't you need fieldErrors={fieldErrors} instead of fieldErrors={this.fieldErrors}? — Yury Tarabanko
And according to docs validate should be of type (values: Object, props: Object) => Object? I mean 2 arguments, not 3 where props is the second one. — Yury Tarabanko
@YuryTarabanko i changed the validate function to test it out on the individual Field components and not the form, but either way even if I change it to be as the API says, it still does not pass custom props up. Also the this.fieldErrors was incorrect, but correcting it still does not make it bubble up to the validate function. — Jason Lee
The docs say you can add a props property to Field, but when logging the validation props of the Field, the custom props are not merged. What is the use for props ? — conor909

pramod singh pramod singh · Accepted Answer · 2019-07-25T12:51:26

I came across this Scenario where I needed values from state and validate the redux form data with them.
Solution that I implemented is to take Global variable in file and assign props to them eg:

   let TicketList = [] // global variable
    
   function () {
      TicketList = this.props.tickets;    
      return (
          <Field
            validate={validationHandler}
          />   
      )
   }
   validationHandler(value){
      if(TicketList.includes(value)){
          return "error message"
      }
   }

This worked for me!!

How to pass custom props to validate function in redux-form?

1 Answers