/react-native-validator-form

Simple validator for react-native forms.

Primary LanguageJavaScriptMIT LicenseMIT

Validation component for react-native forms

license npm version Build Status

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>
        );
    }
}

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.