required: true is not working on empty text box

[kannanseeni]

required: true is not working on empty text box

[perscrew]

Hi, for functional component or class based ?

[kannanseeni]

functional component

[perscrew]

This worked fine for me, I'm going to submit a new PR with a test suite for functional component.

Did you add your field to the state property of the hook useValidation?

Component :

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableHighlight } from 'react-native';
import { useValidation } from '../src/index';

const FunctionalFormTest = () => {
  const [name, setName] = useState('');
  const [pseudo, setPseudo] = useState('');
  const [email, setEmail] = useState('');
  const [number, setNumber] = useState('');
  const [date, setDate] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const { validate, isFieldInError, getErrorsInField, getErrorMessages } = useValidation({
    state: { name, email, pseudo, number, date, newPassword, confirmPassword }
  });

  const _onPressButton = () => {
    validate({
      name: { minlength: 3, maxlength: 7, required: true },
      pseudo: { required: true },
      email: { email: true },
      number: { numbers: true },
      date: { date: 'YYYY-MM-DD' },
      confirmPassword: { equalPassword: newPassword }
    });
  };

  return (
    <View>
      <TextInput onChangeText={setName} value={name} />
      {isFieldInError('name') &&
        getErrorsInField('name').map((errorMessage) => <Text key="nameError">{errorMessage}</Text>)}
      <TextInput onChangeText={setPseudo} value={pseudo} />
      {isFieldInError('pseudo') &&
        getErrorsInField('pseudo').map((errorMessage) => <Text key="pseudoError">{errorMessage}</Text>)}
      <TextInput onChangeText={setEmail} value={email} />
      <TextInput onChangeText={setNumber} value={number} />
      <TextInput onChangeText={setDate} value={date} />
      {isFieldInError('date') && getErrorsInField('date').map((errorMessage) => <Text>{errorMessage}</Text>)}

      <TextInput onChangeText={setNewPassword} value={newPassword} secureTextEntry={true} />
      <TextInput onChangeText={setConfirmPassword} value={confirmPassword} secureTextEntry={true} />
      {isFieldInError('confirmPassword') &&
        getErrorsInField('confirmPassword').map((errorMessage) => <Text>{errorMessage}</Text>)}

      <TouchableHighlight onPress={_onPressButton}>
        <Text>Submit</Text>
      </TouchableHighlight>

      <Text>{getErrorMessages()}</Text>
    </View>
  );
};

export default FunctionalFormTest;

Test unit :

 test('should display pseudo error if pseudo is not inquired', () => {
    const wrapper = shallow(<FunctionalFormTest />);

    wrapper.find(TouchableHighlight).simulate('press');
    wrapper.update();

    const errorMsg = wrapper.find(Text).at(1);
    expect(errorMsg.contains(<Text>The field &quot;name&quot; is mandatory.</Text>)).toBe(true);
  });

[kannanseeni]

`import { useValidation } from 'react-native-form-validator';

const { validate, isFieldInError, getErrorsInField, getErrorMessages } = useValidation({ state: { subscriber, mobile, amount }, }); const validationResult = validate({ subscriber: { required: true }, mobile: { required: true, numbers: true }, amount: { required: true, numbers: true }, });

<TextInput style={styles.input} onChangeText={setSubscriber} placeholder="Subscriber ID/ VC Number" value={subscriber} keyboardType="numeric" /> {isFieldInError('subscriber') && getErrorsInField('subscriber').map(errorMessage => ( <Text style={{ color:'red' }}>{errorMessage} ))} `

[kannanseeni]

Error message is not showing for subscriber.

[kannanseeni]

getting null error

[perscrew]

How do you trigger the validate method ? On a button click ?

[kannanseeni]

yes