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

- a note on errors

- limitations / bugs

usage

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.

api

$3

``jsx import { Form } from '@tswaters/react-form-validation' const example = () => { return }`

- ref - you can pass a ref to get a reference to the underlying element

- any additional props will be passed down to the underlying element

- NOTE: onSubmit will only be called if the form passes validation!

`$3`

Input/Select/TextArea take all the same props.

`jsx import { Input, Select, TextArea } from '@tswaters/react-form-validation' const example = () => ( <> validation={oneOfType([arrayOf(func), func])} other={oneOfType([arrayOf(string), string])} recheck={bool} blur={bool} change={bool} onError={func} onInvalid={func} onValid={func} onValidated={func} /> )`

- validation _(field, others) => Promise_

An function, or array of functions. Will be called for validation with two parameters (field - reference to the input/select/textarea; others - an array of all form inputs). You can return:

- an error - a string (this will be interpreted as an error) - null/undefined (returning nothing signifies validation passes) - throwing an error will be interpreted as failing validation

* other _string|string[]_ - provide the name or id of another element on the form. When validating this element, the other(s) will also have their validation routines called, assuming they have not yet been touched.

* blur _bool_ - validate this field on input blur

* change _bool_ - validate this field on input change

* recheck _bool_ - if recheck is passed as TRUE, once a form field is validated it will be revalidated on any change.

- onError _(Error|null) => void_ - will be called if there is a validation error. This will always be an error object (so check message / code), or null if there is no error.

- onInvalid _(bool) => void_ will be called after validation with a bool indicating the form field is invalid

- onValid _(bool) => void_ will be called after validation with a bool indicating the form field is valid

- onValidated _(bool) => void_ will be called after an input is validated.

Any additional props will be passed down to the underlying input/select/textarea element

`$3`

`jsx import { Validator } from '@tswaters/react-form-validation' const example = () => ( {({ error, valid, invalid }) => ( <> My Value {valid &&

valid

}
        {invalid && invalid
}
        {error && {error.message}
}
      
    )}
  
)

The validator will find & replace all input/select/textarea elements with Input/Select/TextArea.

The render prop, ({ error, valid, invalid, validated }) will be updated with any feedback from the constraint validation API.

Any props provided to validator will be passed through to the underlying Input/Select/TextArea elements.

`examples`

`$3`

`js const FormGroup = ({ id, label, ...rest }) => { return ( {({ error, validated }) => (

form-group ${validated ? 'was-validated' : ''}}>
          
            {label}
          
          
          {error && {error.message}
}


      )}
    
  )
}const LoginForm = () => {
  return (
     e.preventDefault()}>
      
              id="password"
        name="password"
        label="Password"
        type="password"
        required
      />
      
    
  )
}
`
$3
You can provide validations to the  element and they will be called as part of validating the element.
Validation routines must be synchronous. Validation will be considered failed with the following returns:
- a string - the error returned will be new Error(returnValue)
- an error - the error returned will be returnValue
Otherwise, the validation is considered to have succeeded.
`js
import { Form, Validator } from '@tswaters/react-form-validation'
const MyForm = () => {
  const [error, setError] = useState(null)
  const [response, setResponse] = useState(null)
  const validation = useCallback((inputRef) => {
    if (restrictedWords.includes(inputRef.value))
      return new Error('cant use restricted words')
  }, [])
  const handleSubmit = useCallback((e) => {
    e.preventDefault()
    console.log('completely valid, no restricted words here!')
  }, [])
  return (
    

      
        {({ error }) => {
          return (
            <>
              
              {error && {error.message}
}
            
          )
        }}
      
      
    
  )
}
`
a note on errors
Any errors for non-custom validation routines will be returned by the browser, so based upon the user's OS/browser language settings, you'll get different translated error messages, for better or worse.message will be populated with the browser-defined error, and a code is also set that identifies the type of error that occured. As an example, an error raised from a required input not being provided might look something like this:
`json
{
  "message": "Please provide a value",
  "code": "valueMissing"
}
`
You can override the translations by inspecting the code and providing the correct translation:
`js
const ErrorDisplay = error => {
  const [t] = useTranslation() // or however else you get a translation function
  return error ? t(validation-error-${error.code} : null
}
`
For custom error messages, error.message will be whatever you returned or threw back and the code will be customError
Thoughts on Performance
- make sure the tree passed via  is pretty simple. Validator recursively traverses the tree and replaces html inputs with exports from this library.
- validation functions should be memoized lest any change invoke a re-render (wrap functions with useCallback, or an array of functions with memo)
limitations / bugs
- only the first error for a given input element will be returned
- there's gunna be some weirdness with code` returning incorrectly if multiple constraint errors are raised.

`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

- a note on errors

- limitations / bugs

`usage`

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.
api
$3
``jsx
import { Form } from '@tswaters/react-form-validation'
const example = () => {
  return 
}
`
- ref - you can pass a ref to get a reference to the underlying  element
- any additional props will be passed down to the underlying  element
- NOTE: onSubmit will only be called if the form passes validation!
$3
Input/Select/TextArea take all the same props.
`jsx
import { Input, Select, TextArea } from '@tswaters/react-form-validation'
const example = () => (
  <>
          validation={oneOfType([arrayOf(func), func])}
      other={oneOfType([arrayOf(string), string])}
      recheck={bool}
      blur={bool}
      change={bool}
      onError={func}
      onInvalid={func}
      onValid={func}
      onValidated={func}
    />
  
)
`
- validation _(field, others) => Promise_
  An function, or array of functions. Will be called for validation with two parameters (field - reference to the input/select/textarea; others - an array of all form inputs). You can return:
  - an error
  - a string (this will be interpreted as an error)
  - null/undefined (returning nothing signifies validation passes)
  - throwing an error will be interpreted as failing validation
* other _string|string[]_ - provide the name or id of another element on the form. When validating this element, the other(s) will also have their validation routines called, assuming they have not yet been touched.
* blur _bool_ - validate this field on input blur
* change _bool_ - validate this field on input change
* recheck _bool_ - if recheck is passed as TRUE, once a form field is validated it will be revalidated on any change.
- onError _(Error|null) => void_ - will be called if there is a validation error. This will always be an error object (so check message / code), or null if there is no error.
- onInvalid _(bool) => void_ will be called after validation with a bool indicating the form field is invalid
- onValid _(bool) => void_ will be called after validation with a bool indicating the form field is valid
- onValidated _(bool) => void_ will be called after an input is validated.
Any additional props will be passed down to the underlying input/select/textarea element
$3
`jsx
import { Validator } from '@tswaters/react-form-validation'
const example = () => (
  
    {({ error, valid, invalid }) => (
      <>
        My Value
        
        {valid && 
valid
}
        {invalid && invalid
}
        {error && {error.message}
}
      
    )}
  
)
`The validator will find & replace all input/select/textarea elements with Input/Select/TextArea.
The render prop, ({ error, valid, invalid, validated }) will be updated with any feedback from the constraint validation API.
Any props provided to validator will be passed through to the underlying Input/Select/TextArea elements.
examples
$3
`js
const FormGroup = ({ id, label, ...rest }) => {
  return (
    
      {({ error, validated }) => (
        
form-group ${validated ? 'was-validated' : ''}}>
          
            {label}
          
          
          {error && {error.message}
}
        

      )}
    
  )
}const LoginForm = () => {
  return (
     e.preventDefault()}>
      
              id="password"
        name="password"
        label="Password"
        type="password"
        required
      />
      
    
  )
}
`
$3
You can provide validations to the  element and they will be called as part of validating the element.
Validation routines must be synchronous. Validation will be considered failed with the following returns:
- a string - the error returned will be new Error(returnValue)
- an error - the error returned will be returnValue
Otherwise, the validation is considered to have succeeded.
`js
import { Form, Validator } from '@tswaters/react-form-validation'
const MyForm = () => {
  const [error, setError] = useState(null)
  const [response, setResponse] = useState(null)
  const validation = useCallback((inputRef) => {
    if (restrictedWords.includes(inputRef.value))
      return new Error('cant use restricted words')
  }, [])
  const handleSubmit = useCallback((e) => {
    e.preventDefault()
    console.log('completely valid, no restricted words here!')
  }, [])
  return (
    

      
        {({ error }) => {
          return (
            <>
              
              {error && {error.message}
}
            
          )
        }}
      
      
    
  )
}
`
a note on errors
Any errors for non-custom validation routines will be returned by the browser, so based upon the user's OS/browser language settings, you'll get different translated error messages, for better or worse.message will be populated with the browser-defined error, and a code is also set that identifies the type of error that occured. As an example, an error raised from a required input not being provided might look something like this:
`json
{
  "message": "Please provide a value",
  "code": "valueMissing"
}
`
You can override the translations by inspecting the code and providing the correct translation:
`js
const ErrorDisplay = error => {
  const [t] = useTranslation() // or however else you get a translation function
  return error ? t(validation-error-${error.code} : null
}
`
For custom error messages, error.message will be whatever you returned or threw back and the code will be customError
Thoughts on Performance
- make sure the tree passed via  is pretty simple. Validator recursively traverses the tree and replaces html inputs with exports from this library.
- validation functions should be memoized lest any change invoke a re-render (wrap functions with useCallback, or an array of functions with memo)
limitations / bugs
- only the first error for a given input element will be returned
- there's gunna be some weirdness with code` returning incorrectly if multiple constraint errors are raised.

@tswaters/react-form-validation

React Form Validation

usage

api

$3

`$3`

`$3`

`examples`

`$3`

`$3`

a note on errors

`Thoughts on Performance`

`limitations / bugs`

`@tswaters/react-form-validation`

`React Form Validation`

`usage`

api

$3

`$3`

`$3`

`examples`

`$3`

`$3`

a note on errors

`Thoughts on Performance`

`limitations / bugs`