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

| Validation | Description | | ------------- | ------------- | | required | Makes the element required. | | email | Email format validation | | max_len:[value] | Max character length validation | | min_len:[value] | Min character length validation | | exact_len:[value] | Characters should be exact length | | alpha | Only letters validation | | alpha_dash | input value should only contain letters, dash and undescore | | alpha_space | input value should only contain letters and space | | alpha_numeric | input value should only contain letters and numbers | | alpha_numeric_dash | input value should only contain letters, numbers, dash and underscore | | alpha_numeric_space | input value should only contain letters, numbers and spaces | | numeric | input value must be a number | | integer | input value must be a number without a decimal | | boolean | input value has to be either true or false | | float | input value must be a number with a decimal point (float) | | url | input value has to be a URL | | ccnumber | input value should valid credit card number | | contain:[value] | input value should contain | | not_contain:[value] | input value must not contain | | date | field value must be a valid date | | min:[value] | input value needs to be a numeric value, equal to, or higher than param | | max:[value] | input value needs to be a numeric value, equal to, or lower than param | | regex:[value] | input needs to contain a value with valid regex format | | json | input needs to contain a valid JSON format string |

Author

Deni Setyawan.