React controlled form validate

Validation of the forms. High order components for react-form-controlled. It is based on JSON Schema.

Simple arrays

If you are using fieldset with simple array do not enter the name attribute.

import React, { Component } from 'react';
import Form from 'react-form-controlled';
import Validate, { Alert } from 'react-form-controlled-validate';

const schema = {
  type: 'object',
  required: ['firstName'],
  firstName: {
    username: {
      type: 'string',
      minLength: 2,
    },
  },
};

export default class Example extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {};
  }

  onSubmit = (data) => {
    alert(`Hi ${data.firstName}`);
  }

  render() {
    return (
      <Validate schema={schema}>
        <Form
          value={this.state}
          onSubmit={this.onSubmit}
        >
          <input name="firstName" />
          <Alert name="firstName" />

          <button type="submit">Submit</button>
      </Form>
    );
  }
}

Support us

Star this project on GitHub.

Try our other React components

• Translate your great project react-translate-maker
• Google Analytics react-g-analytics
• Google AdSense via Google Publisher Tag react-google-publisher-tag

License

The MIT License (MIT)

Copyright (c) 2016 Zlatko Fedor