how to validate formsection in react js using redux form?

Question

I am trying to validate my form using redux form library. I have a form section in which there are two fields like firstname (which is required). I want to show an error when the user clicks a button.

I tried like this https://codesandbox.io/s/green-frost-414qi

const validateGeneral = general => {
  console.log(general, "general");
  let errors = {};
  // validate address.street etc
  if (general && !general.firstName) {
    errors.firstName = "enter a valid street";
  }
  return errors;
};
const validate = values => {
  console.log(values, "ddd");
  const errors = {};
  errors.general = validateGeneral(values.general);
  return errors;
};

It should show the error message when firstname is empty on button click.

Answer 1

You should add validate prop of the Field component provided by redux-form.

In the codesandbox example above, add validate prop as shown below, it'll work properly.

<Field
  name={i.name}
  component={i.component}
  options={i.options || undefined}
  type={i.type}
  validate={i.validate}
/>

Answer 2

You should include a validate prop as follows then it will show the error message when fields are empty and the button is clicked

const required = value =>
  value || typeof value === "number" ? undefined : "Required";

 <Field
  name = { i.name }
  component = { i.component }
  options = { i.options || undefined }
  type = { i.type }
  validate = { required }
  />