Promise-based form validation logic for React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.editorconfig
.gitignore
README.md
index.js
package.json

README.md

react-collectable

Promise-based form validation logic for React.

Approach:

  • based on Promises
  • declarative, JSX-oriented
  • some assembly effort required
  • composition using function-as-child technique

Brief feature outline:

  • asynchronous validation support
  • pluggable, minimal and flexible

Sample Code

Sample code:

<Context>{(collect) => <Map>{(Parameter) =>
    <form onSubmit={() => doSomeAction(collect())} action="javascript:void(0)">
        <Parameter name="name"><Status>{(error, isPending) =>
            <label data-error={!!error}>
                <span>Name</span>
                <Input filter={requireText}><input
                    type="text"
                    placeholder="Enter Email"
                /></Input>
            </label>
        }</Status></Parameter>

        <Parameter name="email"><Status>{(error, isPending) =>
            <label data-error={!!error}>
                <span>Email</span>
                <Input filter={requireText}><input
                    type="text"
                    placeholder="Enter Email"
                /></Input>
            </label>
        }</Status></Parameter>

        <button type="submit">Submit</button>
    </form>
}</Map> }</Context>

Notes:

  • requireText is a validation filter function
  • doSomeAction receives a promise of the validated input data

To Do

  • brief example
  • sort out ES6 compilation
  • test on Babel