formsy-react

A form input builder and validator for React.

Quick Start	API	1.x API

Background

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

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 christianalfoni/formsy-react if you're looking for old issues.

What You Can Do

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

Install

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

Formsy component packages

twisty/formsy-react-components - Bootstrap components for a formsy-react form.\
zabute/formsy-semantic-ui-react - Formsy-React wrappers for Semantic-Ui-React's form components (currently being updated to formsy 2.x)

1.x to 2.x Upgrade Guide

The 2.0 release fixed a number of legacy decisions in the Formsy API, mostly a reliance on function props over value props passed down to wrapped components. However, the API changes are minor and listed below.

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

Quick Start

1. Build a Formsy element

// 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 passed only if the component is invalid
    const errorMessage = this.props.errorMessage;

    return (
      <div>
        <input onChange={this.changeValue} type="text" value={this.props.value || ''} />
        <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.

2. Use your Formsy element

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".

Contribute

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

Changelog

Check out our Changelog and releases

License

The MIT License (MIT)

License

felixmosh/formsy-react

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages