react-native-validate-form v1.1.3
react-native-validate-form
A simple form validation for React Native
Getting Started
NPM
Install react-native-validate-form using NPM with:
npm install --save react-native-validate-form
Import
import { Form, Field } from 'react-native-validate-form';
Usage
See github documentation for more info.
import React from 'react';
import { View, Text } from 'react-native';
import { Form, Field } from 'react-native-validate-form';
import InputField from './InputField';
const required = value => (value ? undefined : 'This is a required field.');
const email = value => value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,5}$/i.test(value) ? 'Please provide a valid email address.' : undefined;
class MyForm extends React.Component {
constructor() {
super();
this.state = {
errors: [],
email: ''
}
}
submitForm() {
let submitResults = this.myForm.validate();
let errors = [];
submitResults.forEach(item => {
errors.push({ field: item.fieldName, error: item.error });
});
this.setState({ errors: errors });
}
render() {
return(
<Form
ref={(ref) => this.myForm = ref}
validate={true}
submit={this.submitForm.bind(this)}
errors={this.state.errors}
>
<Field
required
component={InputField}
validations={[ required, email ]}
name="email"
value={this.state.email}
onChangeText={(val) => this.setState({ email: val })}
customStyle={{ width: 100 }}
/>
</Form>
);
}
}
InputField will represent your input field component, this component will receive the errors that will be thrown by
this.myForm.validate()
.import React from 'react'; import { TextInput, Text, View } from 'react-native'; const InputField = ({ name, // field name - required customStyle, onChangeText, // event value, // field value disabled, placeholder, errors, // this array prop is automatically passed down to this component from <Form /> }) => { return ( <View> <TextInput value={value && value} onChangeText={onChangeText ? (val) => onChangeText(val) : null} placeholder={placeholder ? placeholder : ""} disabled={disabled} style={customStyle ? customStyle : {}} /> { errors && errors.length > 0 && errors.map((item, index) => item.field === name && item.error ? <Text style={{ color: 'red' }}> {item.error} </Text> : <View /> ) } </View> ); } export default InputField;
If you have nested
<Field />
components, you need to explicitly pass downerrors
as props so you can display the errors accordingly.There's no need to pass down
errors
as props if your<Field />
component is a direct child of<Form />
.// ... <Form ref={(ref) => this.myForm = ref} validate={true} submit={this.submitForm.bind(this)} errors={this.state.errors} // you still need to pass errors as props to Form > <Field required component={InputField} validations={[ required, email ]} name="email" value={this.state.email} onChangeText={(val) => this.setState({ email: val })} customStyle={{ width: 100 }} // no need to pass down errors as props if <Field /> is a direct child of <Form /> /> <View> <Field required component={InputField} validations={[ required, email ]} name="email" value={this.state.email} onChangeText={(val) => this.setState({ email: val })} customStyle={{ width: 100 }} errors={this.state.errors} // explicitly pass down errors as props if your <Field /> is inside an element /> </View> </Form> // ...
TODO: make an example in the repo for better documentation
Options
You can pass these props
to the Form and Field components:
<Form
ref={(ref) => this.myForm = ref}
validate={true}
submit={onSubmit}
>
<Field
required
component={InputField}
validations={[ sampleValidation() ]}
/>
</Form>
Props you can pass for the <Form />
component
Name | Type | Default | Required | Description |
---|---|---|---|---|
ref | string | null | yes | reference name |
validate | boolean | false | no | set this to true to enable validation |
submit | function | () => null | no | function callback if form is valid |
failed | function | () => null | no | function callback if form is invalid |
errors | array | [] | no | array that contains all your field errors and messages |
style | object | {} | no | style object |
Props you can pass for the <Field />
component
Name | Type | Default | Required | Description |
---|---|---|---|---|
required | boolean | false | no | set this to true to require the field |
component | component / func | null | yes | input component or any component that needs validation |
validateFieldName | string | 'value' | no | name of the prop that will be validated |
validations | func / array | [] | no | function or array of functions that contains your validation |
customStyle | object | {} | no | style object |
Credits
License
Copyright (c) 2018 Jefferson Aux