react-native-form-validation-smoov

React Native Form Validation

Overview

Simple JS component for validating forms. Works with deep nested objects.

Installation

npm i react-native-form-validation --save

Components

1. Form

Simple View component.

Methods:

1. validate

   Validates form. Returns array of objects. Each object is for each FormItem in Form. Each object has a isValid property. If form was validated successfully - submit callback will be fired.

   let validatedFields = this.refs.form.validate();
   validatedFields = [
       {
           isValid: true,
           ...other props
       },
       {
           isValid: false,
           ...other props
       }
   ]
   
   

Props:

Name	Type	Description
shouldValidate	boolean	Describes should form be validated before calling submit function. If form is not valid - submit function not called. false by default
submit	function	Simple callback. Will be fired if form is valid or validation is not required
style	object	Simple style object.

2. FormItem

Simple View component. Each Form children should be wrapped in FormItem.

Props:

Name	Type	Description
isRequired	boolean	Describes should this FormItem be validated. false by default
regExp	object	Regular expression for validation. null by default
fieldToBeValidated	string	Name of the property by which we should validate FormItem. 'value' by default
validationFunction	function	Custom validation function. Should return boolean. NOTICE! If validationFunction is defined - default validation for empty value and regular expression with regExp property will not be called
style	object	Simple style object.

Example

import React, { Component } from 'react';
import {
  Text,
  View,
  TextInput,
  TouchableOpacity,
  Dimensions
} from 'react-native';
import { Form, FormItem } from 'react-native-form-validation';
 
const width = Dimensions.get('window').width;
 
class ComponentWithValue extends Component{
  constructor(props){
    super(props);
  }
 
  render(){
    return (
      <View style={this.props.style}>
        <TextInput
          style={styles.flex}
          value={this.props.value}
          onChange={this.props.onChange}/>
      </View>
    );
  }
}
 
class FormTest extends Component {
  constructor(props){
    super(props);
 
    this.state = {
      textInput1:'1',
      textInput2:'2',
      textInput3:'3',
      textInput4:'4',
      view1:'1'
    };
  }
 
  textInput1Change(event){
    this.setState({
      textInput1:event.nativeEvent.text
    });
  }
 
  textInput2Change(event){
    this.setState({
      textInput2:event.nativeEvent.text
    });
  }
 
  textInput3Change(event){
    this.setState({
      textInput3:event.nativeEvent.text
    });
  }
 
  textInput4Change(event){
    this.setState({
      textInput4:event.nativeEvent.text
    });
  }
 
  submit(){
    let submitResults = this.refs.form.validate();
  }
 
  customValidation(){
    return true;
  }
 
  render(){
    return (
      <View style={styles.container}>
        <Form
          ref="form"
          shouldValidate={true}
          style={styles.flex}>
          <FormItem
            isRequired={true}
            regExp={/^\d+$/}
            style={styles.formInput}>
            <TextInput
              style={styles.firstInput}
              value={this.state.textInput1}
              onChange={this.textInput1Change.bind(this)}/>
          </FormItem>
 
          <FormItem
            isRequired={false}
            style={styles.formInput}>
            <View style={styles.flex}>
              <View
                style={styles.secondInputWrapper}>
                <TextInput
                  style={styles.flex}
                  value={this.state.textInput2}
                  onChange={this.textInput2Change.bind(this)}/>
              </View>
            </View>
          </FormItem>
 
          <FormItem
            isRequired={true}
            validationFunction={this.customValidation.bind(this)}>
            <View style={styles.formItem}>
              <View style={styles.flex}>
                <View style={styles.flex}>
                  <TextInput
                    style={styles.flex}
                    value={this.state.textInput3}
                    onChange={this.textInput3Change.bind(this)}/>
                </View>
                <View />
              </View>
            </View>
          </FormItem>
 
          <FormItem isRequired={true}>
            <ComponentWithValue
              style={styles.formItem}
              value={this.state.textInput4}
              onChange={this.textInput4Change.bind(this)}/>
          </FormItem>
 
          <FormItem
            isRequired={true}
            fieldToBeValidated={'test'}>
            <View
              style={styles.formItem}
              test={this.state.view1}>
              <Text> {this.state.view1}</Text>
            </View>
          </FormItem>
        </Form>
 
        <TouchableOpacity
          style={styles.submitBtn}
          onPress={this.submit.bind(this)}>
          <Text>Submit</Text>
        </TouchableOpacity>
 
      </View>
    );
  }
}
 
class SmartForm extends Component {
  render() {
    return (
        <FormTest />
    );
  }
}
 
const styles = {
  container:{
    alignItems:'center',
    justifyContent:'center',
    width,
    flex:1
  },
  flex:{
    flex:1
  },
  formItem:{
    width:300,
    height:50
  },
  formInput:{
    width:300,
    height:50
  },
  firstInput:{
    width:300,
    height:60
  },
  secondInputWrapper:{
    width:300,
    height:50,
  },
  submitBtn:{
    height:100,
    width:100
  }
};
 

License

MIT