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= this /> validators="required""maxNumber:255" errorMessages="this field is required" "must be max 255"/>
Usage
; { superprops context; ValidationComponent;} { return <ValidationForm style=stylecontainer ref= thisform = ref onSubmit= thisprops onError= console > <ValidationComponent component= <RkTextInput rkType="bordered" style= width: "100%" placeholder="List Name" value=name onChangeText= this /> 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= this /> errorMessageStyle= color: "red" validators="required" errorMessages="this field is required" /> <RkButton rkType="primary xlarge" onPress= thisform> Next </RkButton> </ValidationForm> ;}...
You can add your own rules
// validators={["isPasswordMatch:param1:param2"]}ValidationForm;
You can set default error style
{ superprops context; ValidationComponent;}
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 |