# @writetome51/validating-inputs

> TypeScript/JavaScript classes to help you create form inputs that validate themselves

Latest version **3.1.0** (published 2021-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @writetome51/validating-inputs
pnpm add @writetome51/validating-inputs
yarn add @writetome51/validating-inputs
bun add @writetome51/validating-inputs
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2021-05-15 |
| First published | 2019-11-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 15 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Steve Thompson |
| Maintainers | writetome51 |
| Keywords | form, input, validation, interface, class, classes |

## Links

- npm: https://www.npmjs.com/package/@writetome51/validating-inputs
- Repository: https://github.com/writetome51/validating-inputs
- Homepage: https://github.com/writetome51/validating-inputs#readme
- Issues: https://github.com/writetome51/validating-inputs/issues
- npm.io page: https://npm.io/package/@writetome51/validating-inputs

## Dependencies (4)

- [@writetome51/not](https://npm.io/package/@writetome51/not.md) >=2.0.0
- [@writetome51/is-array-not-array](https://npm.io/package/@writetome51/is-array-not-array.md) >=2.0.0
- [@writetome51/is-empty-not-empty](https://npm.io/package/@writetome51/is-empty-not-empty.md) >=2.0.0
- [@writetome51/public-array-container](https://npm.io/package/@writetome51/public-array-container.md) >=4.0.0

## 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

- 3.1.0 (latest) — 2021-05-15
- 3.0.0 — 2020-12-14
- 2.0.0 — 2020-08-07
- 1.1.1 — 2020-07-23
- 1.1.0 — 2020-07-23
- 1.0.2 — 2019-12-08
- 1.0.1 — 2019-11-19
- 1.0.0 — 2019-11-19
- 0.0.1 — 2019-11-18

## README

# interface CanBeValidated

	isValid: (() => boolean) | (() => boolean)[];
		// Can be function or array of functions.


# interface ValidatingInput extends CanBeValidated

    __type: 'text' | 'password' | 'number'; // Private

    id: string;
        // assigned to <input> id. Same value is used for 'name' attribute and  
        // the input's associated <label> 'for' attribute.

	errorMessage: string | string[];
        // message to show if input is invalid.
        // If this.isValid is array of functions, this must be array of strings, 
        // each one belonging with function of same index.

	triggeredError: string;
        // If input is invalid, this is assigned the resulting message in 
        // this.errorMessage.

	objectToBind: object;
        // this.objectToBind[this.propertyToBind] stores entered value of this input

	propertyToBind: string; // property in this.objectToBind

	label: string; // same value is used for 'placeholder' attribute

	hideLabel?: boolean; 
        // Adds 'hidden' attribute to input's associated <label>, default true

	hidePlaceholder?: boolean; // default false

	required?: boolean; // default true

	prompt?: string; // text explaining input or asking user to fill it in

	objectToMatch?: object;
        // this.objectToMatch[this.propertyToMatch] stores the entered value of another
        // input -- an input whose value is supposed to match with this one.
        // Example: if one <input> is for 'password' and another <input> is for 
        // 'confirm-password', they must match.  The ValidatingInput representing 
        // 'confirm-password' would need its objectToMatch[propertyToMatch] to be the 
        // object[property] storing the value of 'password'. 
        // this.objectToMatch[this.propertyToMatch] can then be checked in this.isValid 
        // if it matches this.objectToBind[this.propertyToBind].

	propertyToMatch?: string; // property in this.objectToMatch

	max?: number; // max value allowed if this.type is 'number'

	min?: number; // min value allowed if this.__type is 'number'

	maxLength?: number; // if this.__type is 'text' or 'password'

	minLength?: number; // if this.__type is 'text' or 'password'
	


# ValidatingInputService

Abstract class representing a single `ValidatingInput`.

# ValidatingInputsService

Abstract class representing a `ValidatingInput` array.

# ValidatingNumberInputService

Abstract class, implements `ValidatingInputService`

# ValidatingPasswordInputService

Abstract class, implements `ValidatingInputService`

# ValidatingTextInputService

Abstract class, implements `ValidatingInputService`

# InputValidatorService

Validates a `ValidatingInput`. If `ValidatingInput.isValid` is array of functions,  
they are called in the order listed.

# ValidatingFormInputComponent

Abstract UI component class, representing a `ValidatingInput` in UI.

# ValidatingFormInputsComponent

Abstract UI component class, representing a `ValidatingInput` array in UI.

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