Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/srfaytkn/react-native-form-validator
A simple validation library for react native
https://github.com/srfaytkn/react-native-form-validator
react-native
Last synced: 5 days ago
JSON representation
A simple validation library for react native
- Host: GitHub
- URL: https://github.com/srfaytkn/react-native-form-validator
- Owner: srfaytkn
- License: apache-2.0
- Created: 2018-12-22T17:00:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-11T17:39:06.000Z (over 4 years ago)
- Last Synced: 2024-11-11T20:48:06.591Z (about 1 month ago)
- Topics: react-native
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 14
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-form-validator ★0 - A simple validation library for react native (Components / Forms)
- awesome-react-native - react-native-form-validator ★0 - A simple validation library for react native (Components / Forms)
- awesome-react-native - react-native-form-validator ★0 - A simple validation library for react native (Components / Forms)
- awesome-react-native - react-native-form-validator ★0 - A simple validation library for react native (Components / Forms)
README
# react-native-form-validator
[](https://badge.fury.io/js/react-native-validation)
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:
````javascript
this.setState({ description: value })}
/>
}
validators={["required","maxNumber:255"]}
errorMessages={["this field is required", "must be max 255"]}
/>
````
### Usage
````javascript
import { ValidationForm, ValidationComponent } from "react-native-validator";
constructor(props, context) {
super(props, context);
ValidationComponent.setDefaultErrorMessageStyle({
color: "white",
fontSize: 12,
});
}
render() {
return (
(this.form = ref)}
onSubmit={() => this.props.saveUserList()}
onError={() => console.log("houston we have a problem")}
>
this.setState({ name: value.trim() })}
/>
}
validators={["required", "isEmail"]}
errorMessages={["this field is required", "email is not valid"]}
/>
this.setState({ description: value })}
/>
}
errorMessageStyle={{
color: "red"
}}
validators={["required"]}
errorMessages={["this field is required"]}
/>
this.form.validate()}>
Next
);
}
...
````
#### You can add your own rules
````javascript
// 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
````javascript
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 |