Nutritious Pumpkin Mash

    react-validation-decorator

    0.4.0 • Public • Published

    React Validation Decorator

    Validation decorator for ReactJS base on joi.

    Demo

    Installation

    NPM

    npm install --save react-validation-decorator

    Bower

    bower install --save react-validation-decorator

    Usage

    With decorator:

    import React from 'react';
    import {Validation, Joi} from 'react-validation-decorator';
     
    @Validation 
    class Component extends React.Component {
      validationSchema = Joi.object().keys({
        name: Joi.string().required().label('Name'),
        email: Joi.string().email().required().label('Email').label('Email'),
        password: Joi.string().min(3).max(30).label('Password'),
        verifyPassword: Joi.string().valid(Joi.ref('password')).options({
          language: {
            any: {
              allowOnly: 'don\'t match'
            }
          }
        }).required().label('Verify Password')
      });
     
      state = {};
     
      handleNameChange = (e) => {
        this.setState({
          name: e.target.value
        }, () => {
          this.validate('name');
        });
      };
     
      handleEmailChange = (e) => {
        this.setState({
          email: e.target.value
        }, () => {
          this.validate('email');
        });
      };
     
      handlePasswordChange = (e) => {
        this.setState({
          password: e.target.value
        }, () => {
          this.validate('password');
        });
      };
     
      handleVerifyPasswordChange = (e) => {
        this.setState({
          verifyPassword: e.target.value
        }, () => {
          this.validate('verifyPassword');
        });
      };
     
      handleSubmit = (e) => {
        e.preventDefault();
      };
     
      render() {
        return (
          <form>
            <div className={this.getValidationClassName('name')}>
              <label className='control-label'>Name</label>
              <input type='text' className='form-control'
                value={this.state.name}
                onChange={this.handleNameChange}/>
              {this.renderValidationMessages('name')}
            </div>
            <div className={this.getValidationClassName('email')}>
              <label className='control-label'>Email</label>
              <input type='text' className='form-control'
                value={this.state.email}
                onChange={this.handleEmailChange}/>
              {this.renderValidationMessages('email')}
            </div>
            <div className={this.getValidationClassName('password')}>
              <label className='control-label'>Password</label>
              <input type='password' className='form-control'
                value={this.state.password}
                onChange={this.handlePasswordChange}/>
              {this.renderValidationMessages('password')}
            </div>
            <div className={this.getValidationClassName('verifyPassword')}>
              <label className='control-label'>Verify Password</label>
              <input type='password' className='form-control'
                value={this.state.verifyPassword}
                onChange={this.handleVerifyPasswordChange}/>
              {this.renderValidationMessages('verifyPassword')}
            </div>
            <button className='btn btn-primary' onClick={this.handleSubmit}
              disabled={!this.isDirty() || !this.isValid()}>Submit
            </button>
            <hr/>
            <h3>State:</h3>
            <pre>{JSON.stringify(this.state, undefined, 4)}</pre>
          </form>
        );
      }
    }
     
    export default Component;

    Without decorator:

    //...
    var Component = React.createClass({
      //...
      validationSchema: Joi.object().keys({
        name: Joi.string().required().label('Name'),
        email: Joi.string().email().required().label('Email').label('Email'),
        password: Joi.string().min(3).max(30).label('Password'),
        verifyPassword: Joi.string().valid(Joi.ref('password')).options({
          language: {
            any: {
              allowOnly: 'don\'t match'
            }
          }
        }).required().label('Verify Password')
      }),
      getInitialState: function () {
        return {};
      },
      //...
    });
     
    module.exports = Validation(Component);

    UMD

    <script src="path/to/react-validation-decorator/dist/react-validation-decorator.js"></script>
    //ES2015
    const {Validation, Joi} = window.ReactValidationDecorator;
    // Or
    var Validation = window.ReactValidationDecorator.Validation;
    var Joi = window.ReactValidationDecorator.Joi;

    Example here

    API

    validationSchema

    • is Joi schema.
    • can be defined as joi object or function.
    // Defined as joi object
    validationSchema = Joi.object().keys({
      name: Joi.string().required().label('Name'),
      email: Joi.string().email().required().label('Email').label('Email'),
      password: Joi.string().min(3).max(30).label('Password'),
      verifyPassword: Joi.string().valid(Joi.ref('password')).options({
        language: {
          any: {
            allowOnly: 'don\'t match'
          }
        }
      }).required().label('Verify Password')
    });
     
    // Defined as function
    validationSchema = () => {
      return Joi.object().keys({
        name: Joi.string().required().label('Name'),
        email: Joi.string().email().required().label('Email').label('Email'),
        password: Joi.string().min(3).max(30).label('Password'),
        verifyPassword: Joi.string().valid(Joi.ref('password')).options({
          language: {
            any: {
              allowOnly: 'don\'t match'
            }
          }
        }).required().label('Verify Password')
      });
    };

    validationValue

    • is validation value.
    • it is optional, default validationValue use state as value.
    // Defined as object
    validationValue = () => {
        return Merge(this.state, this.props); // Sample
    };

    validationOptions

    • is Joi options.
    • can be defined as object or function.
    // Defined as object
    validationOptions = {
      convert: false
    };
     
    // Defined as function
    validationOptions = () => {
        return {
       convert: false
      };
    }

    validate(path, [callback])

    • Validates validationValue using the given validationSchema.
    • After it called isDirty(path) will return true.
    handleNameChange = (e) => {
      this.setState({
        name: e.target.value
      }, () => {
        this.validate('name');
      });
    };

    handleValidation(path)

    isValid([path])

    this.isValid('name');
    // return true if field name valid other while return false.
     
    this.isValid();
    // return true if all fields in schema valid other while return false.

    isDirty([path])

    this.isDirty('name');
    // return true if field name dirty other while return false.
     
    this.isDirty();
    // return true if any field in schema valid other while return false.

    getValidationMessages([path])

    If path is defined return error details of path other while return all error details.

    getValidationValue()

    Return validated value.

    resetValidation([callback])

    Reset validation.

    getValidationClassName(path, [successClass, errorClass, defaultClass])

    this.getValidationClassName('name')
    // default return: `form-group`
    // when name dirty and valid return : `form-group has-success`.
    // when name dirty and invalid return: `form-group has-error`
     
    this.getValidationClassName('name', 'valid', 'invalid', 'field')
    // default return: `field`
    // when name dirty and valid return : `field valid`.
    // when name dirty and invalid return: `field invalid`

    renderValidationMessages(path, [className='help-block', onlyFirst=true])

    Render validation messages, if onlyFirst == false it will render all messages of path.

    updateState(newState, [callback])

    //...
    state = {
        user: {
       name: 'John',
        age: 30
      }
    };
    //...
     
    this.updateState({
        'user.name': 'John smith'
    })

    See object-path.

    Troubleshooting

    Cannot resolve module 'net' or 'dns':

    // webpack.config.js
    //...
    module.exports = {
    //...
    node: {
      net: 'mock',
      dns: 'mock'
    }
    //...
    };
    //...

    Install

    npm i react-validation-decorator

    DownloadsWeekly Downloads

    58

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • minhtranite
    • vn38minhtran