npm:react-object-validation

README

react-object-validation

Simple way to define rules to test your forms or any set of objects in react.

The problem

You have a form object and you want to create rules to validate each of its properties, sometimes more than one rule for each property. You want that some method called can return if the property was setted corretly or not and if it wasn't you want display an error message for each rule broken.

The solution

react-object-validation can help with that! The motivation was create a simple way to decorate a react component passing as a props a method to validate some object form according with rules specified.

Installation

$ npm install react-object-validation --save

Usage

import React, { Component } from 'react'
import FormValidationHOC from 'react-object-validation'

class App extends Component {
    state = {
        form: {
            name: ''
        }
        formValidation: {}
    };

    handleChange = e => 
        this.setState({
            form: {
            name: e.target.value
            }
        });

     handleOnClickButton = () =>
        this.setState({
            formValidation: this.props.formValidation.validate(this.state.form)
        });

     render() {
        const nameValidation = this.state.formValidation.name;
        <div>
          <input
            type='text'
            value={this.state.form.name}
            onChange={this.handleChange}
          />
          <div>
                {!nameValidation.isEmpty.isValid ? nameValidation.isEmpty.message : ''}
          </div>
          <button onClick={this.handleOnClickButton}>click</button>
        </div>
     }
}

const fieldRules = {
  name: {
    rules: [
      {
        ruleName: 'isEmpty',
        message: 'Name field is Empty',
        isValidWhen: false,
        method: name => name === ''
      }
    ]
  }
};

export default FormValidationHOC(fieldRules, App);

Properties

Name	Meaning	type	is Required
ruleName	Validation name that will be converted to a property	string	true
message	Error message when is not valid	string	true
isValidWhen	Property to validate the method's return is valid	boolean	true
method	Function to validate the field	function	true

Usage no npm install needed!