Redux Form 6.1.1 - validation on blur is not working on react-native

Question

I'm working on react-native (Android) where I'm using redux-form 6.1.1.

One weird behaviour I've notice i.e redux-form doesn't perform validation when I remove focus(blur) from input field, however on submit validation is working as intended.

Please guide me here. Below is my code.

Text field component

<TextInput
  keyboardType={ textType ? textType : 'default' }
  onChangeText={ (val) => onChange(val) }
  value={ value }
  underlineColorAndroid="transparent"
  style={ styleInput }
  {...this.props}
/>

{/* Error message */}
<View>
  {
    touched && error ?
    <Text>{error}</Text>
    : null
  }
</View>

Implementation of this Text field component as below

<Field
  component={TextField}
  name="phoneNumber"
  placeholder="Mobile Number"
  styleInput={styles.inputs}
  styleInputWrap={styles.inputView}
/>

validate function

function validate(values) {
  const err = {};

  // common function for phone number validation
  validatePhoneNumber(err, 'phoneNumber', values.phoneNumber);

  return err;
}

Note: I observe that from touched && error condition error contains required error message but touched remains false even after switch/focus to another input field. As soon as I hit the submit button touched flag set to true.

Im having the same issue with react-dom. Your blur workaround did not work for me though — Juan Solano

manish keer manish keer · Accepted Answer · 2016-11-04T07:27:55

I found the workaround for this but still if their is any better way then please update.

below is my updated code(with working blur event).

Updated Text field component

const {
  input: { value, onChange, onBlur }
} = this.props;
... 
...
<TextInput
  keyboardType={ textType ? textType : 'default' }
  onChangeText={ val => onChange(val) }
  onBlur={ val => onBlur(val) } {/* <--- added onBlur function */}
  value={ value }
  underlineColorAndroid="transparent"
  style={ styleInput }
  {...this.props}
/>

{/* Error message */}
<View>
  {
    touched && error ?
    <Text>{error}</Text>
    : null
  }
</View>

I just passed onBlur props/function provided by redux-form field to onBlur function of TextInput field(provided by react-native) and every thing is working properly.

Redux Form 6.1.1 - validation on blur is not working on react-native

1 Answers