Validation component for react-native forms
Simple form validation component for React-Native inspired by formsy-react. Web version: react-material-ui-form-validator
Unfortunately I don't have Mac, so this library is tested only on Android.
Supported types:
- TextInput
Default validation rules:
- matchRegexp
- isEmail
- isEmpty
- required
- trim
- isNumber
- isFloat
- isPositive
- minNumber
- maxNumber
- minFloat
- maxFloat
- minStringLength
- maxStringLength
- isString
Some rules can accept extra parameter, example:
<TextValidator
{...someProps}
validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]
Example
Usage
import React from 'react';
import { Button } from 'react-native';
import { Form, TextValidator } from 'react-native-validator-form';
class MyForm extends React.Component {
state = {
email: '',
}
handleChange = (email) => {
this.setState({ email });
}
submit = () => {
// your submit logic
}
handleSubmit = () => {
this.refs.form.submit();
}
render() {
const { email } = this.state;
return (
<Form
ref="form"
onSubmit={this.submit}
>
<TextValidator
name="email"
label="email"
validators={['required', 'isEmail']}
errorMessages={['This field is required', 'Email invalid']}
placeholder="Your email"
type="text"
keyboardType="email-address"
value={email}
onChangeText={this.handleChange}
/>
<Button
title="Submit"
onPress={this.handleSubmit}
/>
</Form>
);
}
}
You can add your own rules
Form.addValidationRule('isPasswordMatch', (value) => {
if (value !== this.state.user.password) {
return false;
}
return true;
});
And remove them
componentWillUnmount() {
Form.removeValidationRule('isPasswordMatch');
}
Usage
import React from 'react';
import { Button } from 'react-native';
import { Form, TextValidator } from 'react-native-validator-form';
class ResetPasswordForm extends React.Component {
state = {
user: {},
}
componentWillMount() {
// custom rule will have name 'isPasswordMatch'
Form.addValidationRule('isPasswordMatch', (value) => {
if (value !== this.state.user.password) {
return false;
}
return true;
});
}
componentWillUnmount() {
Form.removeValidationRule('isPasswordMatch');
}
handlePassword = (event) => {
const { user } = this.state;
user.password = event.nativeEvent.text;
this.setState({ user });
}
handleRepeatPassword = (event) => {
const { user } = this.state;
user.repeatPassword = event.nativeEvent.text;
this.setState({ user });
}
submit = () => {
// your submit logic
}
handleSubmit = () => {
this.refs.form.submit();
}
render() {
const { user } = this.state;
return (
<Form
ref="form"
onSubmit={this.handleSubmit}
>
<TextValidator
name="password"
label="text"
secureTextEntry
validators={['required']}
errorMessages={['This field is required']}
type="text"
value={user.password}
onChange={this.handlePassword}
/>
<TextValidator
name="repeatPassword"
label="text"
secureTextEntry
validators={['isPasswordMatch','required']}
errorMessages={['Password mismatch','This field is required']}
type="text"
value={user.repeatPassword}
onChange={this.handleRepeatPassword}
/>
<Button
title="Submit"
onPress={this.handleSubmit}
/>
</Form>
);
}
}
Advanced usage
API
Form
- Props
Prop
Required
Type
Default value
Description
onSubmit
true
function
Callback for form that fires when all validations are passed
instantValidate
false
bool
true
If true, form will be validated after each field change. If false, form will be validated only after clicking submit button.
onError
false
function
Callback for form that fires when some of validations are not passed. It will return array of elements which not valid.
debounceTime
false
number
0
Debounce time for validation i.e. your validation will run after debounceTime ms when you stop changing your input
- Methods
Name
Params
Return
Descriptipon
resetValidations
Reset validation messages for all validated inputs
isFormValid
dryRun: bool (default true)
Promise
Get form validation state in a Promise (true if whole form is valid). Run with dryRun = false to show validation errors on form
All validated fields (Input)
- Props
Prop
Required
Type
Default value
Description
validators
false
array
Array of validators. See list of default validators above.
errorMessages
false
array
Array of error messages. Order of messages should be the same as validators prop.
name
true
string
Name of input
errorStyle
false
object
{ container: { top: 0, left: 0, position: 'absolute' }, text: { color: 'red' }, underlineValidColor: 'gray', underlineInvalidColor: 'red' } }
Error styles
validatorListener
false
function
It triggers after each validation. It will return true or false
withRequiredValidator
false
bool
Allow to use required validator in any validation trigger, not only form submit
- Methods
Name
Params
Return
Descriptipon
getErrorMessage
Get error validation message
validate
value: any, includeRequired: bool
Run validation for current component
isValid
bool
Return current validation state
makeInvalid
Set invalid validation state
makeValid
Set valid validation state
Contributing
This component covers all my needs, but feel free to contribute.
]}
/>Example
Usage
__CODE_BLOCK_1__You can add your own rules
__CODE_BLOCK_2__And remove them
__CODE_BLOCK_3__Usage
__CODE_BLOCK_4__Advanced usage
API
Form
- Props
| Prop | Required | Type | Default value | Description |
|---|---|---|---|---|
| onSubmit | true | function | Callback for form that fires when all validations are passed | |
| instantValidate | false | bool | true | If true, form will be validated after each field change. If false, form will be validated only after clicking submit button. |
| onError | false | function | Callback for form that fires when some of validations are not passed. It will return array of elements which not valid. | |
| debounceTime | false | number | 0 | Debounce time for validation i.e. your validation will run after __INLINE_CODE_0__ ms when you stop changing your input |
- Methods
| Name | Params | Return | Descriptipon |
|---|---|---|---|
| resetValidations | Reset validation messages for all validated inputs | ||
| isFormValid | dryRun: bool (default true) | Promise | Get form validation state in a Promise (__INLINE_CODE_1__ if whole form is valid). Run with __INLINE_CODE_2__ to show validation errors on form |
All validated fields (Input)
- Props
| Prop | Required | Type | Default value | Description |
|---|---|---|---|---|
| validators | false | array | Array of validators. See list of default validators above. | |
| errorMessages | false | array | Array of error messages. Order of messages should be the same as __INLINE_CODE_3__ prop. | |
| name | true | string | Name of input | |
| errorStyle | false | object | { container: { top: 0, left: 0, position: 'absolute' }, text: { color: 'red' }, underlineValidColor: 'gray', underlineInvalidColor: 'red' } } | Error styles |
| validatorListener | false | function | It triggers after each validation. It will return __INLINE_CODE_4__ or __INLINE_CODE_5__ | |
| withRequiredValidator | false | bool | Allow to use __INLINE_CODE_6__ validator in any validation trigger, not only form submit |
- Methods
| Name | Params | Return | Descriptipon |
|---|---|---|---|
| getErrorMessage | Get error validation message | ||
| validate | value: any, includeRequired: bool | Run validation for current component | |
| isValid | bool | Return current validation state | |
| makeInvalid | Set invalid validation state | ||
| makeValid | Set valid validation state |
Contributing
This component covers all my needs, but feel free to contribute.