React native form validator

React native form validator is a simple library to validate your form fields with React Native. The library is easy to use. You just have to extend the "ValidationComponent" class on your desired React native form component.

1. Installation

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

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

2. Use it in your app

For class component:

Extend "ValidationComponent" class on a form component :

1import React from 'react';
2import ValidationComponent from 'react-native-form-validator';
3
4export default class MyForm extends ValidationComponent {
5  ...
6}

The ValidationComponent extends the React.Component class.

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

1constructor(props) {
2  super(props);
3  this.state = {name : "My name", email: "titi@gmail.com", number:"56", date: "2017-03-01"};
4}
5
6_onSubmit() {
7  // Call ValidationComponent validate method
8  this.validate({
9    name: {minlength:3, maxlength:7, required: true},
10    email: {email: true},
11    number: {numbers: true},
12    date: {date: 'YYYY-MM-DD'}
13  });
14}

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.
equalPassword	Check if a state variable is equal to another value (useful for password confirm).
hasNumber	Check if a state variable contains a number.
hasUpperCase	Check if a state variable contains a upper case letter.
hasLowerCase	Check if a state variable contains a lower case letter.
hasSpecialCharacter	Check if a state variable contains a special character.

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

1const rules = {any: /^(.*)$/};
2
3<FormTest rules={rules} />

Once you have extended the class a set of useful 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 are no errors.
this.isFieldInError(fieldName)	Boolean	This method indicates if a specific field has an error. The field name will match with your React state
this.getErrorMessages(separator)	String	This method returns 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 returns 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 field.

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

1const messages = {
2  en: {numbers: "error on numbers !"},
3  fr: {numbers: "erreur sur les nombres !"}
4};
5
6<FormTest messages={messages} />

You can add custom labels to the state variables, which will be useful if you want to change it's label in the error messages or translate it to the local language :

1const labels = {
2  name: 'Name',
3  email: 'E-mail',
4  number: 'Phone number'
5};
6
7<FormTest labels={labels} />

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

1<FormTest deviceLocale="fr" />

Dynamic validation onChangeText

You can also use dynamic validation by calling validate function on onChangeText event :

1<Input ref="lastName" placeholder={ApiUtils.translate('profile.lastname') + ' *'} 
2                onChangeText={(lastName) => {
3                  this.setState({ lastName }, () => {
4                    this.validate({
5                      lastName: { required: true },
6                    })
7                  })
8                }} value={this.state.lastName} style={[styles.input]} />
9{this.isFieldInError('lastName') && this.getErrorsInField('lastName').map(errorMessage => <Text style={styles.error}>{errorMessage}</Text>)}

For functional component:

You will use useValidation hook inside your component like this :

1import { useValidation } from 'react-native-form-validator';
2import customValidationMessages from './customValidationMessages';
3
4const MyFunction = () => {
5  const [email, setEmail] = useState('');
6  const [name, setName] = useState('');
7  
8  const { validate, getErrorsInField } = useValidation({
9    state: { email, name },
10    messages: customValidationMessages,
11  });
12  
13  const _validateForm = () => {
14    validate({
15      email: { email: true },
16      name: { required: true }
17    })
18  }
19}

You need to pass the state manually to the useValidation hook in state object like above. You can also pass custom messages, labels, rules, deviceLocale and it returns object with all the methods that available in the class component.

3. Complete example

Class component:

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

1'use strict';
2
3import React, {Component}  from 'react';
4import {View, Text, TextInput, TouchableHighlight} from 'react-native';
5import ValidationComponent from '../index';
6
7export default class FormTest extends ValidationComponent {
8
9  constructor(props) {
10    super(props);
11    this.state = {name : "My name", email: "tibtib@gmail.com", number:"56", date: "2017-03-01", newPassword : "", confirmPassword : ""};
12  }
13
14  _onPressButton() {
15    // Call ValidationComponent validate method
16    this.validate({
17      name: {minlength:3, maxlength:7, required: true},
18      email: {email: true},
19      number: {numbers: true},
20      date: {date: 'YYYY-MM-DD'},
21      confirmPassword : {equalPassword : this.state.newPassword}
22    });
23  }
24
25  render() {
26      return (
27        <View>
28          <TextInput ref="name" onChangeText={(name) => this.setState({name})} value={this.state.name} />
29          <TextInput ref="email" onChangeText={(email) => this.setState({email})} value={this.state.email} />
30          <TextInput ref="number" onChangeText={(number) => this.setState({number})} value={this.state.number} />
31          <TextInput ref="date" onChangeText={(date) => this.setState({date})} value={this.state.date} />
32          {this.isFieldInError('date') && this.getErrorsInField('date').map(errorMessage => <Text>{errorMessage}</Text>) }
33
34          <TextInput ref="newPassword" onChangeText={(newPassword) => this.setState({newPassword})} value={this.state.newPassword}  secureTextEntry={true}/>
35          <TextInput ref="confirmPassword" onChangeText={(confirmPassword) => this.setState({confirmPassword})} value={this.state.confirmPassword} secureTextEntry={true} />
36          {this.isFieldInError('confirmPassword') && this.getErrorsInField('confirmPassword').map(errorMessage => <Text>{errorMessage}</Text>) }
37
38          <TouchableHighlight onPress={this._onPressButton}>
39            <Text>Submit</Text>
40          </TouchableHighlight>
41
42          <Text>
43            {this.getErrorMessages()}
44          </Text>
45        </View>
46      );
47  }
48
49}

Function Component:

1'use strict';
2
3import React, { useState } from 'react';
4import { View, Text, TextInput, TouchableHighlight } from 'react-native';
5import { useValidation } from 'react-native-form-validator';
6
7const FormTest = () => {
8  const [name, setName] = useState('My name');
9  const [email, setEmail] = useState('tibtib@gmail.com');
10  const [number, setNumber] = useState('56');
11  const [date, setDate] = useState('2017-03-01');
12  const [newPassword, setNewPassword] = useState('');
13  const [confirmPassword, setConfirmPassword] = useState('');
14
15  const { validate, isFieldInError, getErrorsInField, getErrorMessages } =
16    useValidation({
17      state: { name, email, number, date, newPassword, confirmPassword },
18    });
19
20  const _onPressButton = () => {
21    validate({
22      name: { minlength: 3, maxlength: 7, required: true },
23      email: { email: true },
24      number: { numbers: true },
25      date: { date: 'YYYY-MM-DD' },
26      confirmPassword: { equalPassword: newPassword },
27    });
28  };
29
30  return (
31    <View>
32      <TextInput onChangeText={setName} value={name} />
33      <TextInput onChangeText={setEmail} value={email} />
34      <TextInput onChangeText={setNumber} value={number} />
35      <TextInput onChangeText={setDate} value={date} />
36      {isFieldInError('date') &&
37        getErrorsInField('date').map(errorMessage => (
38          <Text>{errorMessage}</Text>
39        ))}
40
41      <TextInput
42        onChangeText={setNewPassword}
43        value={newPassword}
44        secureTextEntry={true}
45      />
46      <TextInput
47        onChangeText={setConfirmPassword}
48        value={confirmPassword}
49        secureTextEntry={true}
50      />
51      {isFieldInError('confirmPassword') &&
52        getErrorsInField('confirmPassword').map(errorMessage => (
53          <Text>{errorMessage}</Text>
54        ))}
55
56      <TouchableHighlight onPress={_onPressButton}>
57        <Text>Submit</Text>
58      </TouchableHighlight>
59
60      <Text>{getErrorMessages()}</Text>
61    </View>
62  );
63};
64
65export default FormTest;