No description, website, or topics provided.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Added standard rules (#6) Feb 12, 2019
src Do not pre validate components when manual mode Feb 13, 2019
.babelrc Fixed validation to trigger initial validation of components (#4) Feb 11, 2019
.editorconfig Added editorconfig + added eslint task (#8) Feb 12, 2019
.eslintignore Add airbnb eslint (#7) Feb 12, 2019
.eslintrc.json Add airbnb eslint (#7) Feb 12, 2019
.gitignore Initial commit Aug 29, 2016
.npmignore Exclude init-test.js from npm package Feb 13, 2019
.prettierrc Add airbnb eslint (#7) Feb 12, 2019
.travis.yml Use parcel + upgrade Material UI (#3) Feb 1, 2019
CHANGELOG.MD Bumped version to 0.1.17 Feb 12, 2019
README.md Aligned badges in readme.md Feb 12, 2019
init-test.js Add airbnb eslint (#7) Feb 12, 2019
jsconfig.json
package-lock.json Add airbnb eslint (#7) Feb 12, 2019
package.json Bumped version to 0.1.19 Feb 13, 2019

README.md

React Validation Provider

Non-intrusive validation library for React

npm version downloads Build Status Known Vulnerabilities

Requirements

Dependency Version
React >= 16.3.0
Prop-Types >= 15.6.1

Changelog

View changelog

Installation

npm install --save react-validation-provider

Example usage

The first you need to define in you application is the form element types that is going to be validated. This is done by wrapping the input elements/components inside a react component that is decorated with @validate decorator.

import { validate } from 'react-validation-provider';

@validate()
export default class TextInput extends React.Component {
  render() {
    return (
      <input type="text" {...this.props} />
    );
  }
}
//alternative without using decorator
import { validate } from 'react-validation-provider';

class TextInput extends React.Component {
  render() {
    return (
        <input type="text" {...this.props} />
    );
  }
}

export default validate()(TextInput);

Afterwards you simply place these components inside your form components

    <label>Name</label>
    <TextInput value={this.state.name}
               onChange={(ev) => this.setState({name: ev.target.value})}
               rules={[required]} />
    <label>Year</label>
    <TextInput value={this.state.year}
               onChange={(ev) => this.setState({year: ev.target.value})}
               rules={[required, year]} />

The rules prop is a special prop used by the component to validate the value prop of the wrapped component. The rules are simply implemented by defining and object with a validation expression and a message hint method.

export const required = (message = "Required field") => {
  return {
    handlesNull: true,
    validate: value => {
        return value != null && !!value.trim();
    },
    hint: () => {
        return message;
    }
  };
};

// 1900 - 2099
export const year = (message = "Invalid year") => {
  return {
    validate: value => {
        return /^(19|20)\d{2}$/.test(value);
    },
    hint: () => {
        return message;
    }
  };
};

The last thing you have to define the the validation scope. This is typically the top most form component that contains all the input components that are going to be evaluate. The result of the evaluated validation is injected into the isValid prop.

import React from 'react';
import { scope, isValid } from 'react-validation-provider';
import TextInput from './my-test-input';

@scope() // the validation boundary
@isValid // inject the result (props.isValid)
export default class MyForm extends React.Component {

  state = {
    name: null,
    year: null
  };

  onSubmit() {
    // submit data to api...
  }

  render() {
    return(
      <div>
        <label>Name</label>
        <TextInput
          value={this.state.name}
          onChange={(ev) => this.setState({name: ev.target.value})}
          rules={[required]} />
        <label>Year</label>
        <TextInput
          value={this.state.year}
          onChange={(ev) => this.setState({year: ev.target.value})}
          rules={[required, year]} />

        <button
          disabled={!this.props.isValid}
          onClick={() => this.onSubmit()}>Submit</button>
      </div>
    );
  }
}