A form input builder and validator for React.

NOTE: This repository contains separate branch formsy-react-native which includes changes making this module compatible with react-native. If you are making any changes to this repository. Rebase formsy-react-native branch on top of your code, build and release it (with git tag) following vX.X.X-react-native naming convention.

christianalfoni wrote an article on forms and validation with React, Nailing that validation with React JS, the result of that was this component.

The main concept is that forms, inputs, and validation are done very differently across developers and projects. This React component aims to be that “sweet spot” between flexibility and reusability.

This project was originally located at https://github.com/christianalfoni/formsy-react if you're looking for v0.x or old issues.

1. Build any kind of form element components. Not just traditional inputs, but anything you want, and get that validation for free
2. Add validation rules and use them with simple syntax
3. Use handlers for different states of your form. (onError, onSubmit, onValid, etc.)
4. Pass external errors to the form to invalidate elements (E.g. a response from a server)
5. Dynamically add form elements to your form and they will register/unregister to the form

yarn add formsy-react react react-dom and use with webpack, browserify, etc.

The 2.0 release is currently in active development on master, but not yet released publicly. The API docs are still written for the 1.x branch and will remain that way until release. However, the API changes are minor and listed below. If you'd like to upgrade to formsy 2.x you can run:

yarn upgrade [email protected]

Element prop breaking changes:

• getErrorMessage() => errorMessage
• getErrorMessages() => errorMessages
• getValue() => value
• hasValue() => hasValue
• isFormDisabled(): => isFormDisabled
• isFormSubmitted() => isFormSubmitted
• isPristine() => isPristine
• isRequired() => isRequired
• isValid(): => isValid
• showError() => showError
• showRequired() => showRequired

// MyInput.js
import { withFormsy } from 'formsy-react';
import React from 'react';

class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.changeValue = this.changeValue.bind(this);
  }

  changeValue(event) {
    // setValue() will set the value of the component, which in
    // turn will validate it and the rest of the form
    // Important: Don't skip this step. This pattern is required
    // for Formsy to work.
    this.props.setValue(event.currentTarget.value);
  }

  render() {
    // An error message is returned only if the component is invalid
    const errorMessage = this.props.getErrorMessage();

    return (
      <div>
        <input onChange={this.changeValue} type="text" value={this.props.getValue() || ''} />
        <span>{errorMessage}</span>
      </div>
    );
  }
}

export default withFormsy(MyInput);

withFormsy is a Higher-Order Component that exposes additional props to MyInput. See the API documentation to view a complete list of the props.

import Formsy from 'formsy-react';
import React from 'react';
import MyInput from './MyInput';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.disableButton = this.disableButton.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.state = { canSubmit: false };
  }

  disableButton() {
    this.setState({ canSubmit: false });
  }

  enableButton() {
    this.setState({ canSubmit: true });
  }

  submit(model) {
    fetch('http://example.com/', {
      method: 'post',
      body: JSON.stringify(model),
    });
  }

  render() {
    return (
      <Formsy onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
        <MyInput name="email" validations="isEmail" validationError="This is not a valid email" required />
        <button type="submit" disabled={!this.state.canSubmit}>
          Submit
        </button>
      </Formsy>
    );
  }
}

This code results in a form with a submit button that will run the submit method when the form is submitted with a valid email. The submit button is disabled as long as the input is empty (required) and the value is not an email (isEmail). On validation error it will show the message: "This is not a valid email".

• https://github.com/twisty/formsy-react-components, Bootstrap 3 compatible form fields
• https://github.com/zabute/formsy-semantic-ui-react, Semantic UI form fields
• https://github.com/gogoair/react-formsy-combo-select, wrapper for https://github.com/gogoair/react-combo-select
• https://github.com/rojobuffalo/formsy-material-ui, Material-UI form fields (out of date, for formsy-react 0.x)

• Fork repo
• yarn
• yarn lint runs lint checks
• yarn test runs the tests
• npm run deploy build and release formsy

Check out releases

The MIT License (MIT)