Field Level Validation

By specifying a validation rule for validations props on the FieldComponent you can set validation rules at the field level.
Since I'd like to make the View as pure as possible, I recommend setting it with the dripForm() option as much as possible.

Example:

Values:

{}

Sample Code:

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

const FieldLevelValidationForm = dripForm()(({
  handlers,
  meta: { invalid, pristine },
}) => (
  <form onSubmit={handlers.onSubmit}>
    <div>
      <label htmlFor="name">Name</label>
      <Input
        type="text"
        id="name"
        name="name"
        label="Name"
        validations={{
          required: true,
          max: 30,
        }}
      />
    </div>

    <div>
      <label htmlFor="email">Email-Address</label>
      <Input
        type="text"
        id="email"
        name="email"
        label="Email-Address"
        placeholder="enter-your-email@example.com"
        validations={{
          required: true,
          email: true,
        }}
      />
    </div>

    <div>
      <label htmlFor="age">Age</label>
      <Input
        type="number"
        id="age"
        name="age"
        label="Age"
        validations={{
          required: true,
          between: {
            min: 18,
            max: 55,
          },
        }}
      />
    </div>

    <div>
      <label htmlFor="products">Favorite products</label>
      <FieldGroup
        multiple
        name="products"
        label="Favorite products"
        value={['imac', 'ipad']}
        validations={{
          required: true,
          max: 3,
        }}
      >
        <Checkbox value="iphone">iPhone</Checkbox>
        <Checkbox value="imac">iMac</Checkbox>
        <Checkbox value="imac-pro">iMac Pro</Checkbox>
        <Checkbox value="macbook">Macbook</Checkbox>
        <Checkbox value="macbook-pro">Macbook Pro</Checkbox>
        <Checkbox value="ipad">iPad</Checkbox>
      </FieldGroup>
    </div>

    <Button
      primary
      onClick={handlers.onSubmit}
      disabled={invalid || pristine}
    >
      Submit
    </Button>
  </form>
));