A simple validation library for react native

Last update: Mar 25, 2021

Related tags

React Native Forms react-native

Overview

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	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 might also like...

Angular like reactive forms in React.

React Reactive Forms It's a library inspired by the Angular's Reactive Forms, which allows to create a tree of form control objects in the component c

290 Nov 26, 2022

React component for convert the valle screens-api data structure to web component based forms.

valleForm React component for convert the valle screens-api data structure to web component based forms. Write valleForm tabs = { [...] } but

7 Dec 16, 2021

Project using React Router, Styled Components, useEffect, useState and context

Before run do the steps bellow install npm or yarn To run this application you can just use npm or if you want, yarn is another option. Download NPM I

0 Dec 29, 2021

Remix-validity-state is a small React form validation library that aims to embrace HTML input validation and play nicely with Remix primitives

108 Dec 17, 2022

Simple form validation library for React and React Native

React Cee Form Inspired by react hook form and their props name and rewritten in a simple way. It can be used for both React Native and ReactJs. Don't

5 Aug 28, 2022

Simple form validation library for React Native.

Foect Simple form validation library for React Native. Installing Npm npm i --save foect Yarn yarn add foect Quick Start import { TextInput, Text, V

38 Nov 11, 2022

A simple validation library for react native

react-native-form-validator A simple validation library for react native Installation Run: $ npm i react-native-validation --save Validators: matchReg

14 Mar 25, 2021

A simple react and react native form validator inspired by Laravel validation.

Simple React Validator is exactly as it sounds. We wanted to build a validator for react that had minimal configuration and felt natural to use. It's configuration and usage is similar to the Laravel PHP framework and make validation as easy as one line.

266 Jan 3, 2023

The most complete React Library Component for drag’n’drop files. Image and video previews. File validation. Multilanguage. Server side support.

🚀 Spanish README Dropzone UI The best, most complete and easy to use, React file upload library. ⚡ Live demo and code generator : dropzone-ui.com ❤️

177 Dec 21, 2022

Comments

Problem with import 'haste'

The solution is change the code:

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

to

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

opened by fcamargo10 0