npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-form-validator

v0.5.1

Published

React native library to validate form fields

Downloads

2,979

Readme

React native form validator

Node.js CI Npm package version Maintenance made-with-javascript

React native form validator is a simple library to validate your form fields with React Native. The library is easy to use. You just have to extend the "ValidationComponent" class on your desired React native form component.

1. Installation

  • Run npm install 'react-native-form-validator' to fetch the library :
npm install 'react-native-form-validator' --save

2. Use it in your app

For class component:

Extend "ValidationComponent" class on a form component :

import React from 'react';
import ValidationComponent from 'react-native-form-validator';

export default class MyForm extends ValidationComponent {
  ...
}

The ValidationComponent extends the React.Component class.

To ensure form validation you have to call the "this.validate" method in a custom function.

constructor(props) {
  super(props);
  this.state = {name : "My name", email: "[email protected]", number:"56", date: "2017-03-01"};
}

_onSubmit() {
  // Call ValidationComponent validate method
  this.validate({
    name: {minlength:3, maxlength:7, required: true},
    email: {email: true},
    number: {numbers: true},
    date: {date: 'YYYY-MM-DD'}
  });
}

The method arguments should be a representation of the React component state. The first graph level matches with the React state variables. The second level matches with the existing validation rules.

You will find bellow the default rules available in the library defaultRules.js :

|Rule|Benefits| |-------|--------| |numbers|Check if a state variable is a number.| |email|Check if a state variable is an email.| |required|Check if a state variable is not empty.| |date|Check if a state variable respects the date pattern. Ex: date: 'YYYY-MM-DD'| |minlength|Check if a state variable is greater than minlength.| |maxlength|Check if a state variable is lower than maxlength.| |equalPassword|Check if a state variable is equal to another value (useful for password confirm).| |hasNumber|Check if a state variable contains a number.| |hasUpperCase|Check if a state variable contains a upper case letter.| |hasLowerCase|Check if a state variable contains a lower case letter.| |hasSpecialCharacter|Check if a state variable contains a special character.|

You can also override this file via the component React props :

const rules = {any: /^(.*)$/};

<FormTest rules={rules} />

Once you have extended the class a set of useful methods become avaiblable :

|Method|Output|Benefits| |-------|--------|--------| |this.validate(state_rules)|Boolean|This method ensures form validation within the object passed in argument.The object should be a representation of the React component state. The first graph level matches with the React state variables.The second level matches with the existing validation rules.| |this.isFormValid()|Boolean|This method indicates if the form is valid and if there are no errors.| |this.isFieldInError(fieldName)|Boolean|This method indicates if a specific field has an error. The field name will match with your React state| |this.getErrorMessages(separator)|String|This method returns the different error messages bound to your React state. The argument is optional, by default the separator is a \n. Under the hood a join method is used.| |this.getErrorsInField(fieldName)|Array|This method returns the error messages bound to the specified field. The field name will match with your React state. It returns an empty array if no error was bound to the field.|

The library also contains a defaultMessages.js file which includes the errors label for a language locale. You can override this file via the component React props :

const messages = {
  en: {numbers: "error on numbers !"},
  fr: {numbers: "erreur sur les nombres !"}
};

<FormTest messages={messages} />

You can add custom labels to the state variables, which will be useful if you want to change it's label in the error messages or translate it to the local language :

const labels = {
  name: 'Name',
  email: 'E-mail',
  number: 'Phone number'
};

<FormTest labels={labels} />

You can also specify the default custom local language in the props :

<FormTest deviceLocale="fr" />

Dynamic validation onChangeText

You can also use dynamic validation by calling validate function on onChangeText event :

<Input ref="lastName" placeholder={ApiUtils.translate('profile.lastname') + ' *'} 
                onChangeText={(lastName) => {
                  this.setState({ lastName }, () => {
                    this.validate({
                      lastName: { required: true },
                    })
                  })
                }} value={this.state.lastName} style={[styles.input]} />
{this.isFieldInError('lastName') && this.getErrorsInField('lastName').map(errorMessage => <Text style={styles.error}>{errorMessage}</Text>)}

For functional component:

You will use useValidation hook inside your component like this :

import { useValidation } from 'react-native-form-validator';
import customValidationMessages from './customValidationMessages';

const MyFunction = () => {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  
  const { validate, getErrorsInField } = useValidation({
    state: { email, name },
    messages: customValidationMessages,
  });
  
  const _validateForm = () => {
    validate({
      email: { email: true },
      name: { required: true }
    })
  }
}

You need to pass the state manually to the useValidation hook in state object like above. You can also pass custom messages, labels, rules, deviceLocale and it returns object with all the methods that available in the class component.

3. Complete example

Class component:

You can find a complete example in the formTest.js file :

'use strict';

import React, {Component}  from 'react';
import {View, Text, TextInput, TouchableHighlight} from 'react-native';
import ValidationComponent from '../index';

export default class FormTest extends ValidationComponent {

  constructor(props) {
    super(props);
    this.state = {name : "My name", email: "[email protected]", number:"56", date: "2017-03-01", newPassword : "", confirmPassword : ""};
  }

  _onPressButton() {
    // Call ValidationComponent validate method
    this.validate({
      name: {minlength:3, maxlength:7, required: true},
      email: {email: true},
      number: {numbers: true},
      date: {date: 'YYYY-MM-DD'},
      confirmPassword : {equalPassword : this.state.newPassword}
    });
  }

  render() {
      return (
        <View>
          <TextInput ref="name" onChangeText={(name) => this.setState({name})} value={this.state.name} />
          <TextInput ref="email" onChangeText={(email) => this.setState({email})} value={this.state.email} />
          <TextInput ref="number" onChangeText={(number) => this.setState({number})} value={this.state.number} />
          <TextInput ref="date" onChangeText={(date) => this.setState({date})} value={this.state.date} />
          {this.isFieldInError('date') && this.getErrorsInField('date').map(errorMessage => <Text>{errorMessage}</Text>) }

          <TextInput ref="newPassword" onChangeText={(newPassword) => this.setState({newPassword})} value={this.state.newPassword}  secureTextEntry={true}/>
          <TextInput ref="confirmPassword" onChangeText={(confirmPassword) => this.setState({confirmPassword})} value={this.state.confirmPassword} secureTextEntry={true} />
          {this.isFieldInError('confirmPassword') && this.getErrorsInField('confirmPassword').map(errorMessage => <Text>{errorMessage}</Text>) }

          <TouchableHighlight onPress={this._onPressButton}>
            <Text>Submit</Text>
          </TouchableHighlight>

          <Text>
            {this.getErrorMessages()}
          </Text>
        </View>
      );
  }

}

Function Component:

'use strict';

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableHighlight } from 'react-native';
import { useValidation } from 'react-native-form-validator';

const FormTest = () => {
  const [name, setName] = useState('My name');
  const [email, setEmail] = useState('[email protected]');
  const [number, setNumber] = useState('56');
  const [date, setDate] = useState('2017-03-01');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const { validate, isFieldInError, getErrorsInField, getErrorMessages } =
    useValidation({
      state: { name, email, number, date, newPassword, confirmPassword },
    });

  const _onPressButton = () => {
    validate({
      name: { minlength: 3, maxlength: 7, required: true },
      email: { email: true },
      number: { numbers: true },
      date: { date: 'YYYY-MM-DD' },
      confirmPassword: { equalPassword: newPassword },
    });
  };

  return (
    <View>
      <TextInput onChangeText={setName} value={name} />
      <TextInput onChangeText={setEmail} value={email} />
      <TextInput onChangeText={setNumber} value={number} />
      <TextInput onChangeText={setDate} value={date} />
      {isFieldInError('date') &&
        getErrorsInField('date').map(errorMessage => (
          <Text>{errorMessage}</Text>
        ))}

      <TextInput
        onChangeText={setNewPassword}
        value={newPassword}
        secureTextEntry={true}
      />
      <TextInput
        onChangeText={setConfirmPassword}
        value={confirmPassword}
        secureTextEntry={true}
      />
      {isFieldInError('confirmPassword') &&
        getErrorsInField('confirmPassword').map(errorMessage => (
          <Text>{errorMessage}</Text>
        ))}

      <TouchableHighlight onPress={_onPressButton}>
        <Text>Submit</Text>
      </TouchableHighlight>

      <Text>{getErrorMessages()}</Text>
    </View>
  );
};

export default FormTest;