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?

Answer 1

1. I came across this Scenario where I needed values from state and validate the redux form data with them.
2. 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!!