@gatewayapps/react-form-validation
v1.1.0
Published
React components for form field validation
Downloads
17
Readme
react-form-validation
React components for validating field data and providing visual feedback to users
Installation
npm install @gatewayapps/react-form-validation
Using Typescript
No need to install a separate @types/...
package for react-form-validation. The package is written in Typescript and the type definitions as included in with package published to npm.
Usage
The main pieces are the FormValidation
component and FormValidationRule
class. These items do the heavy lifting of making sure your field data is valid according to your rules. Below is a simple example of both being used:
import React, {Component} from 'react
import { FormValidation, FormValidationMessage, FormValidationRule } from '@gatewayapps/react-form-validation'
default class MyComponent extends Component {
constructor(props) {
super(props)
this.state = {
name: ''
}
}
render() {
const validators = [new FormValidationRule('name', 'isEmpty', false, 'Name is required')]
return (
<FormValidation validations={validators} data={this.state} onValidated={(isValid) => console.log('valid?', isValid)}>
{({ validate, validationErrors }) => (
<>
<input
type="text"
className={`form-control ${validationErrors['name'] ? 'is-invalid' : 'is-valid'}`}
name="name"
onChange={(e) => {
this.setState({ name: e.target.value })
validate()
}}
value={this.state.name}
required
autoFocus
aria-describedby="nameErrorBlock"
/>
<FormValidationMessage id="nameErrorBlock" validationErrors={validationErrors['name']} />
</>
)}
</FormValidation>
)
}
}
react-form-validation leverages the validator library. Check out their documentation for a full list of supported functions and their usage. In addition to validator, it is possible to add your own custom function for validating data.
FormValidationRule
const emails = [
"[email protected]",
"[email protected]",
"[email protected]"
]
const checkEmailAvailable = (value, emails) => {
if(!value || emails.includes(value) {
return false
}
return true
}
const validators = [new FormValidationRule('name', 'isEmpty', false, 'Name is required'),
new FormValidationRule('emailAddress', checkEmailAvailable, true, [emails]]
The FormValidationRule
class is what the FormValidation
component uses to verify the data being entered into your forms is valid. Any number of FormValidationRule
instances can be passed into FormValidation
. The definition of the class constructor is as follows:
FormValidationRule(nameOfProp, evaluationFn|evaluationString, isValid, validationMessage, evaluationArguments)
- nameOfProp: The
FormValidation
class accepts React state as a property.nameOfProp
specifies which prop within the state should be evaluated - evaluationFn|evaluationString: This argument can either be a string or a function. The string must match a validator string. The function can be any valid custom function that you as the developer provide as long as it has the signature of fn(value, ...args)
- isValid: This is a boolean value that determines what the result of the evaluation function should equal in order for the data to be considered valid. The first element in the above example, when written as a sentence, would say: if name is empty, then isValid is false
- validationMessage: This is a string that can be used to inform the user.
- evaluationArguments(optional): This is optional, supplementary data that can be used in the evaluation function. For instance, in the second element in the above trivial example, we pass an array of email address strings. If the field data is included in the array, we return
false
so that the validator knows that this data is invalid. Any number of args can be passed.
FormValidation
<FormValidation validations={validators} data={this.state} onValidated={(isValid) => console.log('valid?', isValid)}>
{({ isValid, validate, validationErrors }) => (
return ...
)}
</FormValidation>
The FormValidation
component is a render prop that wraps other components. It provides an isValid
boolean, validate
method and a validationErrors
object that can be used inside the render prop. The definition of the component is as follows:
- validations: This property accepts an array of
FormValidationRule
instances - data: This property accepts a React state
- onValidated(optional): Provides a boolean value determining whether the data is valid or not according to the rules specified and a list of validation errors
(isValid: boolean, validationErrors: IValidationErrors) => void
- validate: This function is returned and available to the children of
FormValidation
. Calling this function kicks off the validation according to the rules specified. - validationErrors: This is a dictionary containing the prop name and the validation message for any fields that did not pass validation according to the rules specified.
FormValidationMessage
<FormValidationMessage id="nameErrorBlock" validationErrors={validationErrors['name']} />
The FormValidationMessage
component is an optional component that can be used to render the validation error message to the user. The definition of the component is as follows:
- id: String used to classify the component
- validationErrors: Can be an array of string values. For instance, if a field has one or more validations, this component can be used to display all errors