npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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