Skip to content
A simple validation library for react native
Branch: master
Clone or download
Latest commit 0af377e May 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src float regex updated Jan 5, 2019
.gitignore first commit Dec 22, 2018
LICENSE Create LICENSE Dec 22, 2018
README.md Update README.md May 28, 2019
package.json v1.0.2 Jan 5, 2019

README.md

react-native-form-validator

npm version

A simple validation library for react native

Installation

Run: $ npm i react-native-validation --save

Validators:

  • matchRegexp
  • isEmail
  • isEmpty
  • required
  • isNumber
  • isFloat
  • isPositive
  • maxNumber
  • minNumber
  • maxFloat
  • minFloat
  • isString
  • minStringLength
  • maxStringLength

Example Component:

<ValidationComponent
  component={
    <RkTextInput
      rkType="bordered"
      style={{ width: "100%" }}
      placeholder="You can type a description"
      value={description}
      onChangeText={value => this.setState({ description: value })}
    />
  }
  validators={["required","maxNumber:255"]}
  errorMessages={["this field is required", "must be max 255"]}
/>

Usage

import { ValidationForm, ValidationComponent } from "react-native-validator";

constructor(props, context) {
  super(props, context);
  ValidationComponent.setDefaultErrorMessageStyle({
    color: "white",
    fontSize: 12,
  });
}

render() {   
    return (
      <ValidationForm
        style={style.container}
        ref={ref => (this.form = ref)}
        onSubmit={() => this.props.saveUserList()}
        onError={() => console.log("houston we have a problem")}
      >
        <ValidationComponent
          component={
            <RkTextInput
              rkType="bordered"
              style={{ width: "100%" }}
              placeholder="List Name"
              value={name}
              onChangeText={value => this.setState({ name: value.trim() })}
            />
          }
          validators={["required", "isEmail"]}
          errorMessages={["this field is required", "email is not valid"]}
        />
        <ValidationComponent
          component={
            <TextInput
              style={{ width: "100%" }}
              placeholder="You can type a description"
              value={description}
              onChangeText={value => this.setState({ description: value })}
            />
          }
          errorMessageStyle={{
            color: "red"
          }}
          validators={["required"]}
          errorMessages={["this field is required"]}
        />
        <RkButton rkType="primary xlarge" onPress={() => this.form.validate()}>
          Next
        </RkButton>
      </ValidationForm>
    );
}
...

You can add your own rules

// validators={["isPasswordMatch:param1:param2"]}
ValidationForm.addValidationRule('isPasswordMatch', (value, param1, param2...) => {
    if (value !== this.state.user.password) {
        return false;
    }
    return true;
});

You can set default error style

constructor(props, context) {
  super(props, context);
  ValidationComponent.setDefaultErrorMessageStyle({
    color: "white",
  });
}

API

ValidationForm

  • Props
Prop Required Type Default value Description
onSubmit true function triggered if form is valid
onError false function triggered if form is not valid
  • Methods
Name Params Return Descriptipon
validate Check form is valid
isValid bool return current validation state

ValidationComponent

  • Props
Prop Required Type Default value Description
validators true array Array of validators.
errorMessages true array Array of error messages. Must be in the same order as validation
errorMessageStyle false object Error textComponent style
component true object Input component(Must include value prop)
style false object Container style props
  • Methods
Name Params Return Descriptipon
setDefaultErrorMessageStyle styleObject Set default style for error textComponent
You can’t perform that action at this time.