# react-form-constraints

> A custom React hook for implementing HTML5 form validation using the Constraints API.

Latest version **1.3.0** (published 2019-04-05) · 0 weekly downloads

## Install

```sh
npm install react-form-constraints
pnpm add react-form-constraints
yarn add react-form-constraints
bun add react-form-constraints
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2019-04-05 |
| First published | 2019-04-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=v8.10.0 |
| Dependencies | 2 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | OndeVai |
| Maintainers | ondevai |
| Keywords | components, react, react-component, toolkit, form validation, Constraints API, HTML5 Form Validation |

## Links

- npm: https://www.npmjs.com/package/react-form-constraints
- Repository: https://github.com/OndeVai/react-form-constraints
- Homepage: https://github.com/OndeVai/react-form-constraints#readme
- Issues: https://github.com/OndeVai/react-form-constraints/issues
- npm.io page: https://npm.io/package/react-form-constraints

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.8.6
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2019-04-05
- 1.2.0 — 2019-04-05
- 1.1.0 — 2019-04-05
- 0.1.0 — 2019-04-02

## README

## Description

A custom React hook for implementing HTML5 form validation using the Constraints API.

## Getting Started

```
npm install react-form-constraints
```

## Dependencies

```
"react": "^16.8.6",
"react-dom": "^16.8.6"
```

## Usage

```javascript
import React from 'react'
import { useFormValidation } from 'react-form-constraints'

const TestForm = () => {
  const {
    getFormProps,
    getFieldProps,
    validations,
    hasValidatedAll,
    inputVal,
    selectVal,
    textAreaVal
  } = useFormValidation()

  return (
    <form
      {...getFormProps({
        id: 'test-form',
        onSubmit: () => alert(`${inputVal} ${selectVal} ${textAreaVal}`)
      })}
    >
      <div>
        <label htmlFor="inputVal">InputVal</label>
        <input
          required
          type="email"
          value={inputVal || ''}
          {...getFieldProps({ name: 'inputVal' })}
        />
        {hasValidatedAll &&
          validations.inputVal &&
          !validations.inputVal.valid && (
            <>
              {validations.inputVal.errors.valueMissing && (
                <span>InputVal is required</span>
              )}
              {validations.inputVal.errors.typeMismatch && (
                <span>InputVal must be a valid email</span>
              )}
            </>
          )}
      </div>
      <div>
        <label htmlFor="selectVal">SelectVal</label>
        <select
          required
          value={selectVal || ''}
          {...getFieldProps({ name: 'selectVal' })}
        >
          <option value="">Choose</option>
          <option value="option1">Option1</option>
          <option value="option2">Option2</option>
        </select>
        {hasValidatedAll &&
          validations.selectVal &&
          !validations.selectVal.valid && (
            <>
              {validations.selectVal.errors.valueMissing && (
                <span>SelectVal is required</span>
              )}
            </>
          )}
      </div>
      <div>
        <label htmlFor="textAreaVal">TextAreaVal</label>
        <textarea
          required
          minLength={3}
          value={textAreaVal || ''}
          {...getFieldProps({ name: 'textAreaVal' })}
        />
        {hasValidatedAll &&
          validations.textAreaVal &&
          !validations.textAreaVal.valid && (
            <>
              {validations.textAreaVal.errors.valueMissing && (
                <span>TextAreaVal is required</span>
              )}
              {validations.textAreaVal.errors.tooShort && (
                <span>TextAreaVal must be at least 3 chars</span>
              )}
            </>
          )}
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  )
}
```

---
_Source: https://npm.io/package/react-form-constraints · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._