Redux Form Validation error while using field names like user.name

Question

I have a react component with a redux form as below

<div className="col-sm-12">
 <div className="form-group row">
  <div className="col-sm-4">
   <label>A. Name</label>
  </div>
  <div className="col-sm-8">
  <ul className="sub-qn-ans-list d-flex list-unstyled">
    <li>
      <Field
      name="first_name"
      component={renderField}
      type="text"
      placeholder="First name"
      className="form-control" />
    </li>
    <li>
      <Field
      name="last_name"
      component={renderField}
      placeholder="Last name"
      type="text"
      className="form-control" />
    </li>
  </ul>
</div>
</div>
<div className="form-group row">
<div className="col-sm-4">
  <label>B. Residential Address</label>
</div>
<div className="col-sm-8">
  <ul className="sub-qn-ans-list d-flex list-unstyled">
    <li>
      <Field
        name="residential.street"
        component={renderField}
        placeholder="Street"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.area"
        component={renderField}
        placeholder="Area"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.city"
        component={renderField}
        placeholder="City"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.district"
        component={renderField}
        placeholder="District"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.landline"
        component={renderField}
        placeholder="Landline"
        type="text"
        className="form-control" />
    </li>
    <li>
      <Field
        name="residential.mobile"
        component={renderField}
        placeholder="Mobile"
        type="text"
        className="form-control" />
    </li>
  </ul>
</div>
</div>
</div>

I'm trying to apply validations for the input fields. The validation for the fields first_name and last_name works fine. But I get an error when I'm trying to apply validation for residential.street.

Below is my code for the validation.

const LocatorValidation = (values, form) => {
const errors = {};
if (!values.first_name) {
  errors.first_name = 'Required';
} else if (!/[A-Za-z.]+/.test(values.first_name)) {
  errors.first_name = 'First name must have only alphabets';
}
if (!values.last_name) {
  errors.last_name = 'Required';
} else if (!/^[A-Za-z.]+$/.test(values.last_name)) {
  errors.last_name = 'First name must have only alphabets';
}
if (!values.residential) {
  errors.residential.street = 'Required';
}
return errors;
}

export default LocatorValidation;

Here is the image which shows the error.

the initial values are coming from an api where the structure of the object has a residential object. — TRISHITA GANGULY
like this: residential : {id: 18, locator_id: 3, first_name: null, last_name: null, street: "bnbnb", city: "bmnbnb",…} area : "bnbn" city : "bmnbnb" contactable_type : "residential" created_at : "2018-08-30T06:23:41.563Z" district : "nmnb" first_name : null id : 18 landline : "bnbnb" last_name : null locator_id : 3 mobile : "nbnbn" relationship : null street : "bnbnb" updated_at : "2018-08-30T06:23:41.563Z" — TRISHITA GANGULY

stilllife stilllife · Accepted Answer · 2018-09-11T10:45:40

As the error states in errors.residential.street the residential property of errors is undefined. So you need to set it as empty object first like

errors.residential = {}
errors.residential.street = "Required"

I would also improve the check

!values.residential || !values.residential.street

Redux Form Validation error while using field names like user.name

1 Answers