@thg303/react-native-form-validator v0.1.6

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: "titi@gmail.com", 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 :

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 :

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: "tibtib@gmail.com", 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>
      );
  }

}