react-tix-form-validation v1.0.10

REACT TIX FORM VALIDATION

A form validation helper for react. Build on top of react-strap plugin.

Install

npm install --save react-tix-form-validation --registry=http://verdaccio.tiket.com:8080

Usage

import  React, { Component } from  'react';
import { FormValidation, Input, GroupValidation } from  'react-tix-form-validation';

class  MyApp  extends  Component {
  construct(props){
    super(props);
    this.input = [];
  }
  onError = messages => console.log(messages);
  
  onSubmit = (e) => {//do some};
  
  //Group validation need to be triggered manualy since doesn't have onChange or onBlur event.
  handleInputChange = (e) => {
    const el = e.target;
    const name = el.name;

    this.setState({
      name: el.value
    }, () => {
      if(el.name === 'cb'){
        //trigger validation for group validation
        this.input[name].validate();
      }
    });

  }
  render() {
    return (
      <FormValidation
        refs={this.input}
        onSubmit={this.onSubmit}
        onError={this.onError}
      >
        <div>
          <Input
            type="text"
            ref={ input => this.input["test"] = input }
            name="test"
            value={this.state.test}
            onChange={this.handleInputChange}
            validation="required|number|max_length:4"
          />
        </div>
        <div>
          <Input
            type="select"
            ref={ input => this.input["test2"] = input }
            name="test"
            value={this.state.test}
            onChange={this.handleInputChange}
            validation="required"
          />
            <option value={1}>Option 1</option>
            <option value={2}>Option 2</option>
            <option value={3}>Option 3</option>
          </Input>
        </div>
        <div>
          <GroupValidation
            ref={ input => this.input["cb"] = input }
            name="testCheckbox"
            value={this.state.test}
            onChange={this.handleInputChange}
            validation="required|custom:must_have"
            customValidation={
              {
                must_have : (value, param) => {
                  return value.length > 1
                }
              }
            }
            customMessage={{
              custom: {
                must_have: "Must have at least one checked!"
              }
            }}
          />
            <input type="checkbox" name="cb" value={1} onChange={this.handleInputChange} /> Check 1
            <input type="checkbox" name="cb" value={2} onChange={this.handleInputChange} /> Check 2
            <input type="checkbox" name="cb" value={3} onChange={this.handleInputChange} /> Check 3
          </GroupValidation>
        </div>
        <button>Submit</button>
      </FormValidation>
    );
  }
}

List Validation

Author

Deni Setyawan.