react-native-validation

react-native-form-validator

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