Basic form example

This example demonstrates basic usage of React Forms library.

Implementation

We start with a schema for our form:

var schema = (
  <Schema>
    <Property
      name="description"
      required
      label="Message"
      input={<textarea placeholder="Give us details here..." />}
    />
    <Property
      name="email"
      label="Email"
      required
      input={<input type="email" />}
      validate={function(v) { return /.+\@.+\..+/.test(v) }}
    />
  </Schema>
)

Note how we use required property on schema nodes to tell React Forms we want the form to be valid only if values for those schema nodes are present.

We also provide a custom validator to email field.

Now we define a form component which wraps React Forms Form component and provides a button to submit a form:

var MyForm = React.createClass({

  render: function() {

    // render Form as <div /> and transfer all props to it
    var form = this.transferPropsTo(
      <Form ref="form" component={React.DOM.div} />
    )

    // return <form /> component with rendered form and a submit button
    return (
        <form onSubmit={this.onSubmit} className="MyForm">
          {form}
          <button type="submit">Submit</button>
        </form>
    )
  },

  onSubmit: function(e) {
    e.preventDefault()

    // check if form is valid
    var validation = this.refs.form.value().validation
    if (ReactForms.validation.isFailure(validation)) {
      console.log('invalid form')
      return
    }

    alert('form submitted!')
  }
})

And finally we render MyForm into DOM:

React.renderComponent(
  <MyForm schema={schema} />,
  document.getElementById('example'))