React form validation components
npm install @tswaters/react-form-validation src="https://img.shields.io/npm/v/@tswaters/react-form-validation" alt="npm version">
src="https://img.shields.io/travis/tswaters/react-form-validation" alt="build status">
src="https://img.shields.io/coveralls/github/tswaters/react-form-validation" alt="coverage">
src="https://img.shields.io/npm/l/@tswaters/react-form-validation" alt="license (MIT)">
The goal of this library is to implement the Constraint Validation API in React while not getting in your way to do it.
Of the existing react form libraries, the use of the constraint validation api is woefully inadequate. Using this API properly is important for accessibility - you need to let the user agent know what is going on.
- usage
- api
- Form
- form element components
- Validator
- examples
- implementing bootstrap's FormGroup
- custom validation functions
You can import the Form and Input/Select/TextArea exports from this library.
These are wrappers around and elements. Any additional props you provide to these elements will be passed down to the underlying form/input/select/textarea element. If you need to, you can also access the underlying element by passing a ref.
Input elements must be children of a Form element. Under the covers, this library uses context to keep track of all fields on the form and will validate all of them if the form is submitted.
A Validator component is also provided which attempts to make using the api a bit easier. This is a container element that uses a render prop which is called with ({ error, valid, invalid, validated }). This routine recursively traverses any provided props to replace input/select/textarea elements with the exports from this library, so it will duplicate any work already done up to that point.
``jsx`
import { Form } from '@tswaters/react-form-validation'
const example = () => {
return
}
- ref - you can pass a ref to get a reference to the underlying