Skip to content

srfaytkn/react-native-form-validator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A simple validation library for react native

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published