Validators

[muhammadnasr]

Thanks a lot for the awesome lib.

Do you support validators like this lib https://github.com/bietkul/react-reactive-form ?

if not, what do suggest to use?

[slv]

I'm going to plan a feature roadmap, I think validator support is going to be with "high priority"
Now you have to build your own validator, like this one https://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs
For example:

class SomeComponent extends React.Component {
  state = {
    first_name: "George",
    email: ""
  };

  validators = [
    // validate First Name is empty or more than 3 chars
    ['first_name', value => !value || value.length > 3, 'First Name must be > 3'],
    // validate Email is empty or valid
    ['email', value => !value || value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i), 'Email must be valid'],
  ];

  printErrors() {
    // validator[0] is the key
    // validator[1] is the function that validates the field
    // validator[2] is the error message
    const errors = this.validators
       .filter(!validator => validator[1](this.state[validator[0]]))
       .map(validator => validator[2])

    if (errors.length <= 0) {
      return null;
    }

    return errors.map(error => <div className="error">{error}</div>);
  }

  render() {
    return (
      <Form binding={this}>
        <Input name="first_name" />
        <Input name="email" />
        {this.printErrors()}
      </Form>
    );
  }
}

[slv]

Here there is a live example:
https://codesandbox.io/s/mjp5kz9m9p