redux-form: Field-Level Validation - React Native - Field not receiving meta:error

What is the current behavior?

In react native, Fields with field-level validators specified don’t receive error messages through meta:error

In the example provided below (sandbox link), there are 3 validators (required, max-length, and email). Their respective error messages are shown under the input via Text components where the 4th and last message is what the Field receives as an error. The received error never changes from undefined.

What is the expected behavior?

A validation function returning anything other than undefined should have its message passed to the Field through meta:error

In the example provided, the 4th error message should show an error whenever any of the preceding 3 messages show an error.

Sandbox Link

https://github.com/oatssss/rn-redux-form-field-level-validation

redux-form-field-validation

What’s your environment?

"engines": {
  "node": "6.11.2"
},
"dependencies": {
  "react": "16.0.0-alpha.12",
  "react-native": "0.47.1",
  "react-redux": "5.0.6",
  "redux": "3.7.2",
  "redux-form": "7.0.3"
},
"devDependencies": {
  "babel-jest": "20.0.3",
  "babel-preset-react-native": "2.1.0",
  "jest": "20.0.4",
  "react-test-renderer": "16.0.0-alpha.12"
}

Other information

What I think are the key parts of the example:

let reqError;
let maxError;
let emailError;

// Field-level validators
const validationRequired = value => {
  let result = reqError = value ? undefined : `This can't be empty`;
  return result;
};

const validationMaxLength = max => value => {
  let result = maxError = value && value.length > max
    ? `Must be ${max} characters or less`
    : undefined;
  return result;
};

const validationEmail = value => {
  let result = emailError = value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
    ? 'Invalid email address'
    : undefined;
  return result;
};

// Component we'll use as the input field
const InputField = ({
  input: {
    onChange,
    ...restInput
  },
  meta: {
    error
    ...restMeta
  },
  ...restProps
}) => (
  <View>
    <TextInput
      onChangeText={onChange}
      {...restInput}
      {...restProps}
    />
    <Text>{`Required error: ${reqError}`}</Text>
    <Text>{`Max length (8 chars) error: ${maxError}`}</Text>
    <Text>{`Email error: ${emailError}`}</Text>
    <Text>{`Actual received error message: ${error}`}</Text>
  </View>
);

// The actual form
let SimpleForm = ({
  handleSubmit
}) => (
  <View>
    <Field
      name="email"
      component={InputField}
      validate={[
        validationRequired,
        validationMaxLength(8),
        validationEmail
      ]}
    />
    <Button
      title={'Submit'}
      onPress={handleSubmit(values => console.log(values))}
    />
  </View>
);

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 22

Most upvoted comments

Same issue

m1m6 on Feb 26, 2018

I found out that if an array of validators is created outside the form instead of specifying them in-line, then the fields at least receive a meta:error message. I haven’t yet tested it thoroughly to determine if they’re displaying the right messages in the right cases though.

const emailValidators = [
  validationRequired,
  validationMaxLength(8),
  validationEmail
];

let SimpleForm = ({
  handleSubmit
}) => (
  <View>
    <Field
      name="email"
      component={InputField}
      validate={emailValidators}
    />
    <Button
      title={'Submit'}
      onPress={handleSubmit(values => console.log(values))}
    />
  </View>
);

EDIT: They do work properly when they’re not used in-line.

oatssss on Sep 11, 2017

Ah I get it, the resolver is basically a hash function, useful knowledge. Thanks for the tip! 😃

oatssss on Dec 21, 2017

Up to now, I could use the workaround I described to get the errors, but now I believe I’m running into a problem because I need to validate a field against the value of another field (for example a Confirm Password field). So I tried something like

const validationEquals = comparison => value => comparison === value ? undefined : 'Not the same'
const confirmValidators = passValue => [
  validationEquals(passValue)
];

...

<Field
    name="confirmPass"
    component={InputField}
    validate={confirmValidators(/* Current value of the password field given here */)}
/>

But I think that because it’s now a function that returns an array instead of just being an array itself, it doesn’t work.

EDIT: I realized that a field-level validation function receives 3 parameters, with the 2nd being allValues of the form. This means I’m able to do

const confirmValidators = [
  (value, allValues) => value === allValues.pass ? undefined : 'Not the same'
];
...

<Field
    name="confirmPass"
    component={InputField}
    validate={confirmValidators}
/>

Which brings it back to being just an array.

oatssss on Sep 11, 2017

I also ran into this issue.
In my case, however, I was seeing how having decorated forms with the same form-props would work out.
Not sure if that’s related though.

stinodes on Sep 11, 2017

run into the same issue.

dongyuwei on Sep 5, 2017