A React form validation library.
import Form, { InputWrapper, ErrorMessage } from 'react-winnebago';
<Form onSubmit={() => console.log("Called when form is valid.")} onValidate={() => console.log("Called when validation is run.")}>
<InputWrapper name="name" validate={[{
test: (value) => (value && value !==''),
message: "Sorry, this field is required."
}, {
test: (value) => (value.length >= 3),
message: "Sorry, name must be at least 3 characters."
}
]}>
<input name="name" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
</InputWrapper>
<ErrorMessage for="name" />
<input type="submit" value="Submit" />
</Form>
For advanced usage, please see the demos.
npm install --save react-winnebago
git clone https://github.com/clickblipclick/react-winnebago.git
cd react-winnebago
npm install
npm start
Then go to http://localhost:3000/ to try them out.
This library seeks to simplify the common use case of having individual HTML form elements with various validation rules, as well as an overall form in which all elements must be valid in order to submit. The basic way it works is as follows:
- A
<Form />
element essentially returns a<form />
while overwriting theonSubmit
prop, to ensure the function passed there is only called if all child elements validate properly. - The
<Form />
element accepts any kind of child(ren) elements. <InputWrapper />
can wrap any<input />
,<textarea />
, or<select />
element. It "registers" itself with the parent<Form />
element using context. This element requires two props, a uniquename
(string) andvalidate
, which takes an array of validation objects.<ArbitraryValidator />
is a component that can be used if you don't have a specific<input />
element you want to wrap, but would still like to prevent form submission in some case. I find this useful for checkboxes and radio buttons. It takes the same props as<InputWrapper />
.
A validation object consists of the following keys:
test
: A validation function that takes the value of the field as the first argument, and returns true or false.message
: The message that should be displayed if the element is invalid.params
?: (Optional) An array of values that are passed as arguments to the validation function in the order they are in the array.
Exports:
Form
InputWrapper
ArbitraryValidator
ErrorMessage
<Form className="my-class" onSubmit={() => console.log("Called when form is valid.")} onValidate={() => console.log("Called when validation is run.")}>
{/* Form content here */}
</Form>
Required. This function is called when all validation passes.
Optional. This runs every time the form validation is run with the first argument being a boolean describing whether the form is valid.
All other props are passed to a <form />
element.
<InputWrapper
name="name"
validate={[
{
test: (value) => (value && value !== ''),
message: "This field is required"
}
]}
invalidClassName="form-element--invalid">
<input name="name" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />
</InputWrapper>
Required. Must be a unique name within the <Form />
.
Required. An array of Validation Objects, eg. [{ test: (value) => { return true; }, message: "Always valid!" }]
Required. A single child, likely <input />
, <textarea />
, or <select />
.
Optional. A string that is appended to the className of the child input element if validation fails.
Optional. If true, the element will validate as soon as it changes the first time.
Optional. When the state of the child input changes from valid to invalid or vice-versa, this function is called.
<ArbitraryValidator
name="name"
validate={[
{
test: (value) => (value && value !== ''),
message: "This field is required"
}
]}
value={this.state.value} />
Required. Must be a unique name within the <Form />
.
Required. An array of Validation Objects, eg. [{ test: (value) => { return true; }, message: "Always valid!" }]
Required. This prop is evaluated with your validation functions.
Optional. If true, the element will validate as soon as it changes the first time.
Optional. When the state of the child input changes from valid to invalid or vice-versa, this function is called.
<ErrorMessage
for="name"
element="span"
/>
Required. Must match the name of an <InputWrapper />
or <ArbitraryValidator />
.
Optional. Can change the element used from the default <label />
to <div />
, <label />
, <span />
, <aside />
, or <section />
.
- Why is this called Winnebago?
Well... React validation -> RV -> Winnebago.