In my React component, I have a Redux form structured like this:
<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>
... (remaining code)
When trying to add validations for the input fields, validation works for first_name and last_name, but fails for residential.street.
Validation code snippet below:
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';
}
... (remaining validation code)
Error screenshot: https://i.stack.imgur.com/c4hvU.png