Manual Submit

An example of submitting outside dripForm().
You can submit it manually by using the submit() method of the Form instance.

For other available instance methods, please refer to API.

Example:

Values:

{}

Sample Code:

import React, { Component } from 'react';
import { dripForm } from 'react-drip-form';
import { Input, Checkbox, FieldGroup, Textarea } from 'react-drip-form-components';

const ManualSubmitForm = dripForm({
  validations: {
    sitename: {
      required: true,
    },
    url: {
      required: true,
      url: true,
    },
    colors: {
      required: true,
    },
  },
})(() => (
  <div className="form">
    <div>
      <label htmlFor="sitename">Sitename</label>
      <Input
        type="text"
        id="sitename"
        name="sitename"
        label="Sitename"
      />
    </div>

    <div>
      <label htmlFor="url">URL</label>
      <Input
        type="text"
        id="url"
        name="url"
        label="URL"
        placeholder="http://example.com"
      />
    </div>

    <div>
      <label>Colors</label>
      <FieldGroup
        multiple
        name="colors"
        label="Colors"
      >
        <Checkbox value="white">White</Checkbox>
        <Checkbox value="gray">Gray</Checkbox>
        <Checkbox value="black">Black</Checkbox>
      </FieldGroup>
    </div>

    <div>
      <label htmlFor="description">Description</label>
      <Textarea
        id="description"
        name="description"
        label="Description"
      />
    </div>
  </div>
));


class MyComponent extends Component {
  handleInitialize = (form) => {
    this.form = form;
  };

  handleClick = (e) => {
    e.preventDefault();
    this.form.submit();
  };

  render() {
    return (
      <div>
        <ManualSubmitForm
          {...this.props}
          onInitialize={this.handleInitialize}
        />

        <Button
          primary
          onClick={this.handleClick}
        >
          Submit from outside
        </Button>
      </div>
    );
  }
}