Lecture # 16 - React Native Library To Validate Form Fields

Lecture # 16 - React native library
to validate form fields

By Dr. Sidra Sultana
React native form validator
 React native form validator is a simple library to validate
your form fields with React Native.
 The library is voluntarily easy to use.
 You just have to extends the "ValidationComponent" class
on your desired React native form component.
 Installation
 Run npm install 'react-native-form-validator' to fetch the library
:
 npm install 'react-native-form-validator' --save
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.
Form Validation
 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'}
 });
 }
Form Validation cont’d
 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.
Default 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.

RegEx
 You can also override this file via the component React
props :
 const rules = {any: /^(.*)$/};
 <FormTest rules={rules} />
Rules
 Once you have extended the class a set of useful methods
become available :
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 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
filed.
Labels
 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:
 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" />
Complete example
 '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“
 };
 }
ValidationComponent
 _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()
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>
 ); }
}
Any Question?
 Thanks

Lecture # 16 - React Native Library To Validate Form Fields

Uploaded by

Lecture # 16 - React Native Library To Validate Form Fields

Uploaded by

Lecture # 16 - React native library

to validate form fields

email Check if a state variable is an email.

required Check if a state variable is not empty.

maxlength Check if a state variable is lower than maxlength.

You might also like