Get started with formsy-react CDN

MIT licensed

Formsy-React is a popular React library for managing forms and form state.

Tags:
  • react
  • form
  • forms
  • validation
  • react-component

Stable version

Copied!

How to start using formsy-react CDN


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

class MyForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      values: {},
      errors: {},
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(model) {
    console.log('Submitted values:', model.toJS());
  }

  render() {
    return (
      <Formsy
        onValid={this.handleSubmit}
        onValidation={(errors) => this.setState({ errors })}
        initialValues={{ name: '', email: '' }}
      >
        <input name="name" type="text" validation={{ required: true }} />
        <input name="email" type="email" validation={{ required: true, email: true }} />
        <button type="submit">Submit</button>
        {this.state.errors.name && <p>{this.state.errors.name}</p>}
        {this.state.errors.email && <p>{this.state.errors.email}</p>}
      </Formsy>
    );
  }
}

export default MyForm;
Copied!
Copied!

All versions