React Enquiry
Enquiry a the form validation framework for React you can already use if you
know how HTML and forms work. Simply wrap your <input />
element in an enquiry/form
and you're ready go.
Check the documentation site for examples and documentation!
Architecture
Enquiry recursively wraps your form components in an higher-order-component that
captures validation properties and change listeners. These HOC components are then registered with the containing form component to easily retrieve validation results and values on a single onSubmit
handler.
Enquiry makes it easy to create re-usable form sub-sections by attaching child-wrappers using refs.
Installation
npm install enquiry
Usage
The documentation site is a showcase of enquiry's features.
Examples from the documentation site can be found here
Getting values from input elements
Geting all the values from your form is as un-exiting as simply replacing the
<form>
tag with enquiry/from
:
const Form = ;const React = ; // values will be an object containing {name, password}// errors can be an object of {name, password} { if errors return ; return ;} { return <Form onSubmit=onSubmitRegisterForm> <label>Your name: </label> <input name="name" /> <label>Choose a password: </label> <input name="password" type="password" /> <button>submit</button> </Form> ;}
Validating values from input elements
You can supply a validation
property to your input elements, comprising of either
one single function or an array of functions.
Validation functions will be executing in order, returning at the first failed validation. A validation function should return a single string if validation fails.
Validation functions receive two arguments: the value of the field being checked, and the values of all other fields as a key => value object.
For more advanced examples plese refer to the documentation site
Example:
const Form = ;const React = ; { if !value return "This is a required field";} { if !/^\d+$/ return "This must be a positive int";} { return <Form onSubmit=onSubmitNameForm> <label>How old are you?: </label> <input name="age" validation=isRequired isPositiveInt /> <button>submit</button> </Form> ;}