docs.md

Table of Contents

• lpForm
  • Parameters
  • Examples
• validateWithOptions
  • Parameters
  • Examples
• validate
  • Parameters
  • Examples

lpForm

A wrapper around the reduxForm HOC exported from redux-form that gives it some extra functionality:

1. Makes extra options available for configuring the form
2. Wraps every onSubmit result in a promise. Additionally, wraps rejected onSubmit results in a SubmissionError. If the thrown error has an errors property, its value will be passed to SubmissionError. Else, if the thrown error has a message property, this will be passed to a SubmissionError as a form-wide error. The original error will be accessible via the SubmissionErrors meta.error property. This enables developers to access useful information regarding the origin of the failure, e.g., HTTP status.
3. Provides a default onSubmit function that resolves successfully and logs a warning.
4. Ignores any onChange events that occur on a pristine and untouched form, patching a bug in redux-form v8.

The extra options that can be provided to lpForm are as follows:

Parameters

• name String An alias for "form" - a unique identifier for the form.
• initialValuesFilters Object An object with an allow or reject key pointing to an array of attribute names. The indicated attributes will be omitted from the form's initialValues.
• submitFilters Object Another filter object that will be used to filter the form values that are submitted.
• constraints Object Contraints that will be used to validate the form using the validateWithOptions function.
• validationOptions Object An object to pass in any options specified by validateJS.
• beforeSubmit Function A function that will be called with the form values before onSubmit. The options/props of lp-form are provided as the second argument.
• debounceSubmit Number An integer representing the time in milliseconds to wait before submitting the form.

Examples

import { Field } from 'redux-form'
import { lpForm } from 'lp-form'
import { Input, SubmitButton } from 'lp-components'

function MyForm ({ handleSubmit }) {
   return (
     <form onSubmit={ handleSubmit }>
       <Field name="name" component={ Input } />
       <SubmitButton> I'll submit the form! </SubmitButton>
     </form>
   )
}

export default compose(
   lpForm({
     name: 'my-form',
     initialValuesFilters: { reject: ['id'] },
     constraints: { name: { presence: true } },
   })
)(MyForm)

validateWithOptions

A wrapper around the validate function exported from Validate JS to make it work seamlessly with Redux Form.

Parameters

• constraints Object A 'flat' object containing constraints in the format specified by Validate JS. These are key-value pairs where the keys correspond to keys in the data that will be validated. This is a 'flat' object in that nested data must be accessed using a string path (ex. 'foo.bar') as the key.
• values Object A nested object containing values to be validated.
• options Object An object to pass in any options specified by Validate JS. (optional, default {})

Examples

const values = {
  name: 'Foo',
  address: {
    zip: '12'
  }
}

const options = {
  fullMessages: true,
}

const constraints = {
  name: {
    presence: true
  },
  'address.zip': {
    presence: true,
    length: { is: 5 }
  }
}

validateWithOptions(constraints, values, options)

// {
//   address: {
//     zip: ['Zip is the wrong length (should be 5 characters)']
//   }
// }

Returns Object errors - A nested object of errors that will be passed to redux form.

validate

A wrapper around the validate function exported from Validate JS to make it work seamlessly with Redux Form.

Parameters

• constraints Object A 'flat' object containing constraints in the format specified by Validate JS. These are key-value pairs where the keys correspond to keys in the data that will be validated. This is a 'flat' object in that nested data must be accessed using a string path (ex. 'foo.bar') as the key.
• values Object A nested object containing values to be validated.

Examples

const values = {
  name: 'Foo',
  address: {
    zip: '12'
  }
}

const constraints = {
  name: {
    presence: true
  },
  'address.zip': {
    presence: true,
    length: { is: 5 }
  }
}

// Function is curried so this call will work
validate(constraints)(values) 

// {
//   address: {
//     zip: ['Zip is the wrong length (should be 5 characters)']
//   }
// }

Returns Object errors - A nested object of errors that will be passed to redux form.