React native form validator

React native form validator is a simple library to validate your form fiels with React Native. The library is voluntarily easy to use. You juste have to extends the "ValidationComponent" class on your desired React native form component.

1. Installation

• Run npm install 'react-native-form-validator' to fetch the library :

npm install 'react-native-form-validator' --save

2. Use it in your app

Extend "ValidationComponent" class on a your form component :

import React from 'react';
import ValidationComponent from 'react-native-form-validator';

export default class MyForm extends ValidationComponent {
  ...
}

The ValidationComponent extends the React.Component class.

To ensure form validation you have to call the "this.validate" method in a custom function.

constructor(props) {
  super(props);
  this.state = {name : "My name", email: "[email protected]", number:"56", date: "2017-03-01"};
}

_onSubmit() {
  // Call ValidationComponent validate method
  this.validate({
    name: {minlength:3, maxlength:7, required: true},
    email: {email: true},
    number: {numbers: true},
    date: {date: 'YYYY-MM-DD'}
  });
}

The method arguments should be a representation of the React component state. The first graph level matches with the React state variables. The second level matches with the existing validation rules.

You will find bellow the default rules available in the library defaultRules.js :

Rule	Benefits
numbers	Check if a state variable is a number.
email	Check if a state variable is an email.
required	Check if a state variable is not empty.
date	Check if a state variable respects the date pattern. Ex: date: 'YYYY-MM-DD'
minlength	Check if a state variable is greater than minlength.
maxlength	Check if a state variable is lower than maxlength.

You can also override this file via the component React props :

const rules = {any: /^(.*)$/};

<FormTest rules={rules} />

Once you have extended the class a set of usefull methods become avaiblable :

Method	Output	Benefits
this.validate(state_rules)	Boolean	This method ensures form validation within the object passed in argument.The object should be a representation of the React component state. The first graph level matches with the React state variables.The second level matches with the existing validation rules.
this.isFormValid()	Boolean	This method indicates if the form is valid and if there is no errors.
this.isFieldInError(fieldName)	Boolean	This method indicates if a specific field is in error. The field name will matches with your React state
this.getErrorMessages(separator)	String	This method retruns the different error messages bound to your React state. The argument is optional, by default the separator is a \n. Under the hood a join method is used.
this.getErrorsInField(fieldName)	Array	This method retruns the error messages bound to the specified field. The field name will match with your React state. it returns an empty array if no error was bound to the filed.

The library also contains a defaultMessages.js file wich includes the errors label for a language locale. You can override this file via the component React props :

const messages = {
  en: {numbers: "error on numbers !"},
  fr: {numbers: "erreur sur numbers !"}
};

<FormTest messages={messages} />

You can also specify the default custom language locale in the props :

<FormTest deviceLocale="fr" />

3. Complete example

You can find a complete example in the formTest.js file :

'use strict';

import React, {Component}  from 'react';
import {View, Text, TextInput, TouchableHighlight} from 'react-native';
import ValidationComponent from '../index';

export default class FormTest extends ValidationComponent {

  constructor(props) {
    super(props);
    this.state = {name : "My name", email: "[email protected]", number:"56", date: "2017-03-01"};
  }

  _onPressButton() {
    // Call ValidationComponent validate method
    this.validate({
      name: {minlength:3, maxlength:7, required: true},
      email: {email: true},
      number: {numbers: true},
      date: {date: 'YYYY-MM-DD'}
    });
  }

  render() {
      return (
        <View>
          <TextInput ref="name" onChangeText={(name) => this.setState({name})} value={this.state.name} />
          <TextInput ref="email" onChangeText={(email) => this.setState({email})} value={this.state.email} />
          <TextInput ref="number" onChangeText={(number) => this.setState({number})} value={this.state.number} />
          <TextInput ref="date" onChangeText={(date) => this.setState({date})} value={this.state.date} />
          {this.isFieldInError('date') && this.getErrorsInField('date').map(errorMessage => <Text>{errorMessage}</Text>) }

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

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

}