# wil-form

> Validate react form

Latest version **1.2.6** (published 2019-12-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install wil-form
pnpm add wil-form
yarn add wil-form
bun add wil-form
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2019-12-19 |
| First published | 2019-08-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 39.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wiloke |
| Maintainers | longnguyen |
| Keywords | state, management |

## Links

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

## Dependencies (1)

- [ramda](https://npm.io/package/ramda.md) ^0.26.1

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.2.6 (latest) — 2019-12-19
- 1.2.5 — 2019-12-17
- 1.2.4 — 2019-12-17
- 1.2.3 — 2019-12-17
- 1.2.2 — 2019-11-23
- 1.2.1 — 2019-11-23
- 1.2.0 — 2019-11-23
- 1.1.9 — 2019-10-05
- 1.1.8 — 2019-10-03
- 1.1.7 — 2019-10-03
- 1.1.6 — 2019-09-09
- 1.1.5 — 2019-09-09
- 1.1.4 — 2019-08-29
- 1.1.3 — 2019-08-04
- 1.1.2 — 2019-08-04
- … 3 more at https://npm.io/package/wil-form/versions

## README

# Validate form for Reactjs and React Native
WilForm will help you validate the data fields passing through it. When fields are passed in with an array

### Installation

**npm**

```bash
npm install wil-form --save
```

**yarn**

```bash
yarn add wil-form
```

<img src="./wil-form-3.gif?raw=true" width="300">

**Basic Example**

#### [https://codesandbox.io/s/wil-form-emhy1](https://codesandbox.io/s/wil-form-emhy1)

```js
import WilForm from "wil-form";

class App extends React.Component {
  render() {
    return (
      <form>
        <WilForm
          fields={[
            {
              name: "username",
              type: "text",
              required: true,
              label: "Username"
            },
            {
              name: "password",
              type: "password",
              required: true,
              label: "Password"
            },
            {
              name: "email",
              type: "text",
              required: true,
              label: "Email"
            },
            {
              name: "gender",
              label: "Gender",
              type: "select",
              required: true,
              multiple: false,
              options: [
                {
                  name: "",
                  label: "",
                  checked: false
                },
                {
                  name: "male",
                  label: "Male",
                  checked: false
                },
                {
                  name: "female",
                  label: "Female",
                  checked: false
                }
              ]
            }
          ]}
          constraints={{
            username: {
              presence: {
                message: "Username is required"
              },
              length: {
                minimum: 6,
                maximum: 10,
                message: "Your username must be at least 6 characters and at most 10 characters"
              }
            },
            password: {
              presence: {
                message: "Password is required"
              },
              special: {
                pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/,
                message: "Special password....."
              },
              length: {
                minimum: 5,
                message: "Your password must be at least 5 characters"
              }
            },
            email: {
              presence: {
                message: "Email is required"
              },
              special: {
                pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                message: "Email address is not valid"
              },
              length: {
                minimum: 5,
                message: "Your password must be at least 5 characters"
              }
            },
            gender: {
              presence: {
                message: "Gender is required"
              }
            }
          }}
          defaultResult={{
            username: "Test"
          }}
          defineRenderFields={{
            text: "renderInput",
            password: "renderInput",
            select: "renderSelectAbc"
          }}
          renderInput={({
            name,
            type,
            required,
            label,
            error,
            defaultValue,
            onChange,
            onFocus
          }) => {
            return (
              <div>
                <label>
                  {label}
                  {required && <span style={{ color: "red" }}> *</span>}
                </label>
                <br />
                <input
                  name={name}
                  type={type}
                  defaultValue={defaultValue}
                  onChange={event => {
                    const { value } = event.target;
                    onChange(value);
                  }}
                  onFocus={event => {
                    const { value } = event.target;
                    onFocus(value);
                  }}
                />
                <br />
                {error.status && (
                  <span style={{ color: "red" }}>{error.message}</span>
                )}
              </div>
            );
          }}
          renderSelectAbc={({
            options,
            multiple,
            required,
            label,
            error,
            defaultValue,
            onChange,
            onFocus
          }) => {
            return (
              <div>
                <label>
                  {label}
                  {required && <span style={{ color: "red" }}> *</span>}
                </label>
                <br />
                <select
                  multiple={multiple}
                  defaultValue={defaultValue}
                  onChange={event => {
                    const { value } = event.target;
                    onChange(value);
                  }}
                  onFocus={event => {
                    const { value } = event.target;
                    onFocus(value);
                  }}
                >
                  {options.map(item => {
                    return (
                      <option
                        key={item.name}
                        value={item.name}
                        checked={item.checked}
                      >
                        {item.label}
                      </option>
                    );
                  })}
                </select>
                {error.status && (
                  <div style={{ color: "red" }}>{error.message}</div>
                )}
              </div>
            );
          }}
          renderElementWithIndex={{
            render: handleSubmit => {
              return (
                <button type="submit" onClick={handleSubmit}>
                  submit
                </button>
              );
            },
            moveByIndex: dataLength => {
              return dataLength;
            }
          }}
          onSubmit={({ result, valid, errors }) => {
            if (valid) {
              console.log(result);
            } else {
              console.log(errors);
            }
          }}
        />
      </form>
    )
  }
```

**Options**

| Prop                  | Type                                | Default | Description |
| :---------            | :-------:                           | :-----: | :----------- |
| fields (required)     | `Array<Object>`                     | -       | declare an array of data fields |
| constraints           | `Object`                            | `{}`    | object check validate corresponding to data fields |
| defineRenderFields    | `Object`                            | `{}`    | This property will help you create a renderProps function corresponding to the field. You can then use the following example: `<WilForm defineRenderFields = {{ text: "renderInput" }} renderInput = {({name, type, label, ..., error, defaultValue, onChange, onFocus}) => <FieldComponent />} />`. "error, defaultValue, onChange, onFocus" are special params generated |
| renderElementWithIndex| `{ render: React$Node, moveByIndex: Function }`| `{}`    | see the example above |
| defaultResult         | `Object`                            | `{}`    | default result |
| defaultErrors         | `Object`                            | `{}`    | default errors |
| onSubmit              | `({result, valid, errors}) => void` | -  | when you take the action to submit the form |
| onChange              | `({result, valid, errors}) => void` | -  | when you take the action to change the data field |
| onMount               | `({result, valid, errors}) => void` | -  | componentDidMount |
| customSubmit          | `(handleSubmit: Function) => void`  | -  | see the [Example](https://codesandbox.io/s/wil-form-custom-submit-bwszi) |

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