Submit Validation

This is an example of executing validation after submitting.
The basic pattern is to get the form instance with onInitialize props and set the error with the setErrors() method.

If you need to display the spinner during sending or if you need to disable the component, you can express it by giving the original props like submitting.

Example:

Values:

{}

Sample Code:

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


// Simulate API
const requestLogin = (email, password) => new Promise((resolve, reject) => {
  setTimeout(() => {
    if (email === 'example@mail.com' && password === 'passwd') {
      resolve();
    } else {
      reject();
    }
  }, 1000);
});


const SubmitValidationForm = dripForm()(({
  handlers,
  meta: { invalid, pristine },
  submitting,
}) => (
  <form onSubmit={handlers.onSubmit}>
    <div>
      <label htmlFor="email">Email-Address</label>
      <Input
        type="email"
        id="email"
        name="email"
        label="Email-Address"
        placeholder="enter-your-email@example.com"
        validations={{
          required: true,
          email: true,
        }}
      />
    </div>

    <div>
      <label htmlFor="email">Password</label>
      <Input
        type="password"
        id="password"
        name="password"
        label="Password"
        validations={{
          required: true,
        }}
      />
    </div>

    <Button
      primary
      onClick={handlers.onSubmit}
      disabled={invalid || pristine || submitting}
    >
      {submitting ? 'Logging in...' : 'Login'}
    </Button>
  </form>
));


class MyComponent extends Component {
  state = {
    submitting: false,
  };

  handleInitialize = (form) => {
    this.form = form;
  };

  handleSubmit = ({ email, password }) => {
    this.setState({ submitting: true });

    requestLogin(email, password)
      .then(() => {
        this.setState({ submitting: false });
        this.form.clear();
        alert('Login succeeded!');
      })
      .catch(() => {
        this.form.setErrors({ email: 'Email-Address or password is incorrect.' });
        this.setState({ submitting: false });
      });
  };

  render() {
    return (
      <SubmitValidationForm
        {...this.props}
        submitting={this.state.submitting}
        onInitialize={this.handleInitialize}
        onValidSubmit={this.handleSubmit}
      />
    );
  }
}