react-native-validate-form

A simple form validation for React Native

Getting Started

NPM

Install react-native-validate-form using NPM with:

npm install --save react-native-validate-form

Import

  import { Form, Field } from 'react-native-validate-form';

Usage

See github documentation for more info.

See example here: Validate Form Example

  import React, { Component } from 'react';
  import { View, Text, TouchableOpacity } from 'react-native';
  import { Form, Field } from 'react-native-validate-form';

  import InputField from './InputField';

  const required = value => (value ? undefined : 'This is a required field.');
  const email = value => value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,5}$/i.test(value) ? 'Please provide a valid email address.' : undefined;

  class MyForm extends Component {
    constructor() {
      super();

      this.state = {
        errors: [],
        email: ''
      }
    }

    submitForm() {
      let submitResults = this.myForm.validate();

      let errors = [];

      submitResults.forEach(item => {
        errors.push({ field: item.fieldName, error: item.error });
      });

      this.setState({ errors: errors });
    }

    submitSuccess() {
      console.log("Submit Success!");
    }

    submitFailed() {
      console.log("Submit Faield!");
    }

    render() {
      return(
        <View>
          <Form
            ref={(ref) => this.myForm = ref}
            validate={true}
            submit={this.submitSuccess.bind(this)}
            failed={this.submitFailed.bind(this)}
            errors={this.state.errors}
          >
            <Field
              required
              component={InputField}
              validations={[ required, email ]}
              name="email"
              value={this.state.email}
              onChangeText={(val) => this.setState({ email: val })}
              customStyle={{ width: 100 }}
            />
          </Form>

          <TouchableOpacity onPress={this.submitForm.bind(this)}>
            <Text>SUBMIT</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }

• InputField will represent your input field component, this component will receive the errors that will be thrown by this.myForm.validate().

  import React from 'react';
  import { TextInput, Text, View } from 'react-native';
  
  const InputField = ({
    name,           // field name - required
    customStyle,
    onChangeText,   // event
    value,          // field value
    disabled,
    placeholder,
    errors,         // this array prop is automatically passed down to this component from <Form />
  }) => {
    return (
      <View>
        <TextInput
          value={value && value}
          onChangeText={onChangeText ? (val) => onChangeText(val) : null}
          placeholder={placeholder ? placeholder : ""}
          disabled={disabled}
          style={customStyle ? customStyle : {}}
        />
  
        { errors && errors.length > 0 && errors.map((item, index) =>
            item.field === name && item.error ?
              <Text style={{ color: 'red' }}>
                {item.error}
              </Text>
            : <View />
          )
        }
      </View>
    );
  }
  
  export default InputField;

• If you have nested <Field /> components, you need to explicitly pass down errors as props so you can display the errors accordingly.

• There's no need to pass down errors as props if your <Field /> component is a direct child of <Form />.

  // ...
    <Form
      ref={(ref) => this.myForm = ref}
      validate={true}
      submit={this.submitForm.bind(this)}
      errors={this.state.errors} // you still need to pass errors as props to Form
    >
      <Field
        required
        component={InputField}
        validations={[ required, email ]}
        name="email"
        value={this.state.email}
        onChangeText={(val) => this.setState({ email: val })}
        customStyle={{ width: 100 }}
        // no need to pass down errors as props if <Field /> is a direct child of <Form />
      />
      <View>
        <Field
          required
          component={InputField}
          validations={[ required, email ]}
          name="email"
          value={this.state.email}
          onChangeText={(val) => this.setState({ email: val })}
          customStyle={{ width: 100 }}
          errors={this.state.errors} // explicitly pass down errors as props if your <Field /> is inside an element
        />
      </View>
    </Form>
  // ...

Options

You can pass these props to the Form and Field components:

  <Form
    ref={(ref) => this.myForm = ref}
    validate={true}
    submit={onSubmit}
  >
    <Field
      required
      component={InputField}
      validations={[ sampleValidation() ]}
    />
  </Form>

Props you can pass to the <Form /> component

Props you can pass to the <Field /> component

Credits

Jefferson Aux

License

The MIT License

Copyright (c) 2018 Jefferson Aux