Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-native-validate-form
Advanced tools
A simple form validation for React Native
Install react-native-validate-form using NPM with:
npm install --save react-native-validate-form
import { Form, Field } from 'react-native-validate-form';
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>
);
}
}
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;
<Field />
components, you need to explicitly pass down errors
as props so you can display the errors accordingly.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
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 |
Copyright (c) 2018 Jefferson Aux
FAQs
Form validation for React Native
We found that react-native-validate-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.