How to use formsy-react - 10 common examples

import React from 'react';
import Formsy from 'formsy-react';
import Select from 'react-select';

if (process.env.BROWSER) {
  require('react-select/dist/default.css');
}

export default React.createClass({
  displayName: 'SelectInput',
  // Add the Formsy Mixin
  mixins: [Formsy.Mixin],
  propTypes: {
    name: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    options: React.PropTypes.array.isRequired
  },

  // setValue() will set the value of the component, which in
  // turn will validate it and the rest of the form
  changeValue: function (event) {
    // console.log(event.toDateString());
    this.setValue(event);
  },
  render: function () {

    // Set a specific className based on the validation
    // state of this component. showRequired() is true

// Greater than number
addValidationRule('greaterThan', (formValues, inputValue, value) => parseFloat(inputValue) > value);

// Less than number
addValidationRule('lessThan', (formValues, inputValue, value) =>
  inputValue ? parseFloat(inputValue) < value : true,
);

// Less or equal to number
addValidationRule('lessOrEqualTo', (formValues, inputValue, value) =>
  inputValue ? parseFloat(inputValue) <= value : true,
);

// Greater than number
addValidationRule(
  'greaterEqualTo',
  (formValues, inputValue, value) => parseFloat(inputValue) >= value,
);

addValidationRule('isMoment', (formValues, inputValue) => moment.isMoment(inputValue));

// Checks if input is a valid Ether address
// TODO: Does not support ENS! (It's hard, ENS returns promises)
addValidationRule(
  'isEtherAddress',
  (formValues, inputValue, _value) => !inputValue || Web3.utils.isAddress(inputValue),
);

addValidationRule(
  'isNumber',
  (formValues, inputValue, _value) => !inputValue || /^\d+$/.test(inputValue),

formatDate={(date) => date.toISOString().substring(0,10)}
        {...this.props}
        onChange={this.handleValueChange} />
    );
  }
});

let FormsyRadio = React.createClass({
  mixins: [ Formsy.Mixin ],

  // Material-UI replaces any component inside RadioButtonGroup with RadioButton, so no need to render it here
  render: function () {}
});

let FormsyRadioGroup = React.createClass({
  mixins: [ Formsy.Mixin, FormComponentMixin ],

  componentDidMount: function () {
    this.setValue(this._radio.getSelectedValue());
  },

  render: function () {
    return (
       this._radio = c}
        onChange={this.handleValueChange} >
        {this.props.children}
      
    );
  }
});

'use strict';

import React from 'react';
import Formsy from 'formsy-react';

export default React.createClass({
  displayName: 'BootstrapInput',
  // Add the Formsy Mixin
  mixins: [Formsy.Mixin],
  propTypes: {
    name: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    type: React.PropTypes.string.isRequired
  },

  // setValue() will set the value of the component, which in
  // turn will validate it and the rest of the form
  changeValue: function (event) {
    this.setValue(event.currentTarget.value);
  },
  render: function () {

    // Set a specific className based on the validation
    // state of this component. showRequired() is true
    // when the value is empty and the required prop is

import { addValidationRule } from 'formsy-react';
import moment from 'moment';
import Web3 from 'web3';

// Formsy validations

// Greater than number
addValidationRule('greaterThan', (formValues, inputValue, value) => parseFloat(inputValue) > value);

// Less than number
addValidationRule('lessThan', (formValues, inputValue, value) =>
  inputValue ? parseFloat(inputValue) < value : true,
);

// Less or equal to number
addValidationRule('lessOrEqualTo', (formValues, inputValue, value) =>
  inputValue ? parseFloat(inputValue) <= value : true,
);

// Greater than number
addValidationRule(
  'greaterEqualTo',
  (formValues, inputValue, value) => parseFloat(inputValue) >= value,
);

addValidationRule('isMoment', (formValues, inputValue) => moment.isMoment(inputValue));

// Checks if input is a valid Ether address
// TODO: Does not support ENS! (It's hard, ENS returns promises)
addValidationRule(
  'isEtherAddress',
  (formValues, inputValue, _value) => !inputValue || Web3.utils.isAddress(inputValue),

val;

		while ( len ) {
			val = parseInt( ccNum.charAt( --len ), 10 );
			bit ^= 1;
			sum += bit ? arr[ val ] : val;
		}

		return sum && sum % 10 === 0;
	};
} )( [ 0, 2, 4, 6, 8, 1, 3, 5, 7, 9 ] );

// To find out more about validators, see:
// https://github.com/christianalfoni/formsy-react/blob/master/API.md#validators

Formsy.addValidationRule( 'isCC', function( values, value ) {
	if ( value === undefined || value === null ) {
		return false;
	}

	// strip spaces
	value = value.replace( /\s/g, '' );

	return value.length > 12 && luhnChk( value );
} );

Formsy.addValidationRule( 'isArray', function( values, value ) {
	return isArray( value );
} );

Form.ActionBar = ActionBar;
Form.Section = Section;

let React = require('react');

let Formsy = require('formsy-react');

let SideInput = React.createClass({
    mixins: [Formsy.Mixin],

    handleChange(event) {
        let value = event.target.value;
        this.props.onChange(value);
        this.setValue(value);
    },
    render() {
        let isErrorVisible = (this.isFormSubmitted() || !this.isPristine()) && !this.isValid();

        let isBuyChecked = this.props.value === 'buy';
        let isSellChecked = this.props.value === 'sell';
        return (
            <div>
                <label>
                    <input checked="{isBuyChecked}" novalidate="" required="" type="radio" value="buy" name="order.isBuy"></label></div>

import { isArray, map } from 'lodash';
import Formsy from 'formsy-react';
import createReactClass from 'create-react-class';

/**
 * Internal Dependencies
 */
import Label from './label';
import getUniqueId from './counter';
import FormInputValidation from '../form-input-validation';
import requiredFieldErrorFormatter from './required-error-label';

export default createReactClass( {
	displayName: 'MultiCheckboxInput',

	mixins: [ Formsy.Mixin ],

	propTypes: {
		name: PropTypes.string.isRequired,
		description: PropTypes.string,
		className: PropTypes.any,
		choices: PropTypes.any,
		defaultValue: PropTypes.array,
		validations: PropTypes.string,
		onChange: PropTypes.func,
		showSelectAll: PropTypes.bool,
		selectAllLabel: PropTypes.string,
	},

	getDefaultProps: function() {
		return {
			showSelectAll: false,

import { setMuiComponentAndMaybeFocus } from './utils';

const FormsyDate = React.createClass({

  propTypes: {
    defaultDate: React.PropTypes.object,
    name: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func,
    requiredError: React.PropTypes.string,
    validationError: React.PropTypes.string,
    validationErrors: React.PropTypes.object,
    validations: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
    value: React.PropTypes.object,
  },

  mixins: [Formsy.Mixin],

  componentDidMount() {
    const { defaultDate } = this.props;
    const value = this.getValue();

    if (typeof value === 'undefined' && typeof defaultDate !== 'undefined') {
      this.setValue(defaultDate);
    }
  },

  handleChange(event, value) {
    this.setValue(value);
    if (this.props.onChange) this.props.onChange(event, value);
  },

  setMuiComponentAndMaybeFocus: setMuiComponentAndMaybeFocus,

/*jshint node:true */

'use strict';

var React = require('react');
var Formsy = require('formsy-react');
var ComponentMixin = require('./mixins/component');
var Row = require('./row');

var CheckboxGroup = React.createClass({

    mixins: [Formsy.Mixin, ComponentMixin],

    propTypes: {
        name: React.PropTypes.string.isRequired,
        options: React.PropTypes.array.isRequired
    },

    getDefaultProps: function() {
        return {
            label: '',
            help: null
        };
    },

    changeCheckbox: function() {
        var value = [];
        this.props.options.forEach(function(option, key) {