/formosa

Primary LanguageJavaScript

This library is unmaintained, I no longer use it since I've stopped using react

Formosa

Build Status npm

What?

The objective of this library is to make building dynamic forms with complex validations easier leveraging MobX

Example

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isValid: false };
  }

  handleSubmit(loginData) {
    /*
    Do whatever you want to do here.

    The object will follow the form's structure so
    loginData will be an object with 'username' and
    'password' properties, eg:

    {
      username: 'ludat',
      password: 'super secret'
    }
    */
  }

  render() {
    return (
      <Form
        onSubmit={this.handleSubmit}
        onValid={() => this.setState({isValid: true})}
        onInvalid={() => this.setState({isValid: false})}
      >
        <ValidatedInput
          name="username"
          validation={notEmpty.and(alphaOnly)}
        />
        <ValidatedInput
          name="password"
          validation={notEmpty}
        />
        <button type='submit' disabled={!this.state.isValid}/>
      </Form>
    );
  }
}

This simple example shows the most basic features of this library, among the most important it includes:

  • Nested forms: There can be sections of a form that validate multiple fields. eg, a field can never be higher than the other number