Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

formsy-react-patch

charosez2MIT1.0.18
react, form, forms, validation, react-component

readme

formsy-react GitHub release Build Status

A form input builder and validator for React JS

How to use API Examples

From version 0.12.0 Formsy only supports React 0.13.1 and up

Background

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

The main concept is that forms, inputs and validation is done very differently across developers and projects. This extension to React JS aims to be that "sweet spot" between flexibility and reusability.

What you can do

  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. Ex. "onSubmit", "onError", "onValid" etc.

  4. Server validation errors automatically binds to the correct form input component

  5. You can dynamically add form elements to your form and they will register/unregister to the form

Install

  1. Download from this REPO and use globally (Formsy) or with requirejs
  2. Install with npm install formsy-react and use with browserify etc.
  3. Install with bower install formsy-react

Changes

Check out releases

Older changes

How to use

See examples folder for examples.

Complete API reference is available here.

Formsy gives you a form straight out of the box

  /** @jsx React.DOM */
  var Formsy = require('formsy-react');
  var MyAppForm = React.createClass({
    enableButton: function () {
      this.setState({
        canSubmit: true
      });
    },
    disableButton: function () {
      this.setState({
        canSubmit: false
      });
    },
    submit: function (model) {
      someDep.saveEmail(model.email);
    },
    render: function () {
      return (
        <Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
          <MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
          <button type="submit" disabled={!this.state.canSubmit}>Submit</button>
        </Formsy.Form>
      );
    }
  });

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

Building a form element (required)

  /** @jsx React.DOM */
  var Formsy = require('formsy-react');
  var MyOwnInput = React.createClass({

    // Add the Formsy Mixin
    mixins: [Formsy.Mixin],

    // 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 
      // passed to the input. showError() is true when the 
      // value typed is invalid
      var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;

      // An error message is returned ONLY if the component is invalid
      // or the server has returned an error message
      var errorMessage = this.getErrorMessage();

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

The form element component is what gives the form validation functionality to whatever you want to put inside this wrapper. You do not have to use traditional inputs, it can be anything you want and the value of the form element can also be anything you want. As you can see it is very flexible, you just have a small API to help you identify the state of the component and set its value.

  • formsy-react-components - A set of React JS components for use in a formsy-react form
  • ...
  • Send PR for adding your project to this list!

Contribute

  • Fork repo
  • npm install
  • npm start runs the development server on localhost:8080
  • npm test runs the tests

License

formsy-react is licensed under the MIT license.

The MIT License (MIT)

Copyright (c) 2015 Gloppens EDB Lag

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

changelog

This is the old CHANGES file. Please look at releases for latest changes.

0.8.0

  • Fixed bug where dynamic form elements gave "not mounted" error (Thanks @sdemjanenko)
  • React is now a peer dependency (Thanks @snario)
  • Dynamically updated values should now work with initial "undefined" value (Thanks @sdemjanenko)
  • Validations are now dynamic. Change the prop and existing values are re-validated (thanks @bryannaegele)
  • You can now set a "disabled" prop on the form and check "isFormDisabled()" in form elements
  • Refactored some code and written a couple of tests

0.7.2:

  • isNumber validation now supports float (Thanks @hahahana)
  • Form XHR calls now includes CSRF headers, if exists (Thanks @hahahana)

0.7.1

  • Fixed bug where external update of value on pristine form element did not update the form model (Thanks @sdemjanenko)
  • Fixed bug where children are null/undefined (Thanks @sdemjanenko)

0.7.0

  • Dynamic form elements. Add them at any point and they will be registered with the form
  • onChange() handler is called whenever an form element has changed its value or a new form element is added to the form
  • isNumeric validator now also handles actual numbers, not only strings
  • Some more tests

0.6.0

  • onSubmit() now has the same signature regardless of passing url attribute or not
  • isPristine() is a new method to handle "touched" form elements (thanks @FoxxMD)
  • Mapping attributes to pass a function that maps input values to new structure. The new structure is either passed to onSubmit and/or to the server when using a url attribute (thanks for feedback @MattAitchison)
  • Added default "equalsField" validation rule
  • Lots of tests!

0.5.2

  • Fixed bug with handlers in ajax requests (Thanks @smokku)

0.5.1

  • Fixed bug with empty validations

0.5.0

  • Added cross input validation
  • Fixed bug where validation rule refers to a string
  • Added "invalidateForm" function when manually submitting the form

0.4.1

  • Fixed bug where form element is required, but no validations

0.4.0:

  • Possibility to handle form data manually using "onSubmit"
  • Added two more default rules. isWords and isSpecialWords

0.3.0:

  • Deprecated everything related to buttons automatically added
  • Added onValid and onInvalid handlers, use those to manipulate submit buttons etc.

0.2.3:

  • Fixed bug where child does not have props property

0.2.2:

  • Fixed bug with updating the props

0.2.1:

  • Cancel button displays if onCancel handler is defined

0.2.0:

  • Implemented hasValue() method

0.1.3:

  • Fixed resetValue bug

0.1.2:

  • Fixed isValue check to empty string, needs to support false and 0

0.1.1:

  • Added resetValue method
  • Changed value check of showRequired