Neat Pidgeon Manure

    This package has been deprecated

    Author message:

    Deprecated

    react-revalidator

    0.1.1 • Public • Published

    React Revalidator

    React mixin for form validation base on revalidator.

    Installation

    npm install --save react-revalidator

    Usage

    var RevalidatorMixin = require('react-revalidator');
    var UpdateStateMixin = require('react-revalidator/lib/UpdateStateMixin');
     
    var Component = React.createClass({
      mixins: [RevalidatorMixin, UpdateStateMixin],
      revalidatorSchema: {
        example: {
          type: 'object',
          required: true,
          properties: {
            name: {
              type: 'string',
              required: true,
              allowEmpty: false,
              minLength: 6
            },
            email: {
              type: 'string',
              required: true,
              format: 'email'
            }
          }
        }
      },
      getInitialState: function () {
        return {
          example: {}
        };
      },
      handleNameChange: function (e) {
        this.updateState({
          'example.name': e.target.value
        }, function () {
          this.validate('example.name');
        });
      },
      handleEmailChange: function (e) {
        this.updateState({
          'example.email': e.target.value
        }, function () {
          this.validate('example.email');
        });
      },
      handleSubmit: function (e) {
        e.preventDefault();
        console.log('example: ', this.state.example);
      },
      handleReset: function (e) {
        e.preventDefault();
        this.setState({
          example: {}
        });
        this.resetValidation();
      },
      render: function () {
        return (
          <form>
            <div className={this.getFieldClass('example.name')}>
              <label className='control-label'>Name</label>
              <input type='text' className='form-control'
                value={this.state.example.name}
                onChange={this.handleNameChange}/>
              {this.renderFieldMessages('example.name')}
            </div>
            <div className={this.getFieldClass('example.email')}>
              <label className='control-label'>Email</label>
              <input type='text' className='form-control'
                value={this.state.example.email}
                onChange={this.handleEmailChange}/>
              {this.renderFieldMessages('example.email')}
            </div>
            <button className='btn btn-primary' onClick={this.handleSubmit}
              disabled={!this.isDirty('example') || !this.isValid('example')}>
              Save
            </button>
            <button className='btn btn-default' onClick={this.handleReset}>
              Reset
            </button>
          </form>
        );
      }
    });

    See more revalidatorSchema infomation here.

    Methods

    • resetValidation()
    • validate(property)
    • handleValidation(property)
    • getErrors([property])
    • isValid([property])
    • isDirty([property])
    • getFieldClass(property, [successClass, errorClass, defaultClass])
    • renderFieldMessages(property, [className])

    property use object-path format.

    successClass default value is has-success.

    errorClass default value is has-error.

    defaultClass default value is form-group.

    className default value is help-block.

    Example

    See example folder or demo.

    Install

    npm i react-revalidator

    DownloadsWeekly Downloads

    6

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • vn38minhtran