# @anypoint-web-components/validatable-mixin

> A mixin to implement user input validation in a LitElement component

Latest version **1.1.3** (published 2020-09-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @anypoint-web-components/validatable-mixin
pnpm add @anypoint-web-components/validatable-mixin
yarn add @anypoint-web-components/validatable-mixin
bun add @anypoint-web-components/validatable-mixin
```

## 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.1.3 |
| Published | 2020-09-27 |
| First published | 2019-06-24 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 22.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | lbauret, twoplustwoone, jarrodek |
| Keywords | api-components, arc-components, forms, validation, web-components |

## Links

- npm: https://www.npmjs.com/package/@anypoint-web-components/validatable-mixin
- Repository: https://github.com/anypoint-web-components/validatable-mixin
- Homepage: https://github.com/anypoint-web-components/validatable-mixin#readme
- Issues: https://github.com/anypoint-web-components/validatable-mixin/issues
- npm.io page: https://npm.io/package/@anypoint-web-components/validatable-mixin

## Dependencies (2)

- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^1.3.0
- [@anypoint-web-components/validator-mixin](https://npm.io/package/@anypoint-web-components/validator-mixin.md) ^1.1.1

## 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.1.3 (latest) — 2020-09-27
- 1.1.2 — 2020-09-22
- 1.1.1 — 2020-05-15
- 1.1.0 — 2020-05-15
- 1.0.2 — 2019-09-04
- 1.0.1 — 2019-08-01
- 1.0.0 — 2019-06-24

## README

[![Published on NPM](https://img.shields.io/npm/v/@anypoint-web-components/validatable-mixin.svg)](https://www.npmjs.com/package/@anypoint-web-components/validatable-mixin)

[![Build Status](https://travis-ci.com/anypoint-web-components/validatable-mixin.svg)](https://travis-ci.com/anypoint-web-components/validatable-mixin)

# ValidatableMixin

A mixin to implement user input validation in a LitElement component.

This validatable supports multiple validators.

Use `ValidatableMixin` to implement an element that validates user input. Use the related `ArcValidatorBehavior` to add custom validation logic to an anypoint-input or other wrappers around native inputs.

To implement the custom validation logic of your element, you must override the protected `_getValidity()` method of this mixin, rather than `validate()`.

## Accessibility

Changing the `invalid` property, either manually or by calling `validate()` will update the `aria-invalid` attribute.

## Usage

### Installation

```bash
npm i @anypoint-web-components/validatable-mixin --save
```

### Using `_getValidity()` function

```javascript
import { LitElement, html } from 'lit-element';
import { ValidatableMixin } from '@anypoint-web-components/validatable-mixin';

class InputValidatable extends ValidatableMixin(LitElement) {
  render() {
    return html`<input @input="${this._onInput}"/>`;
  }

  _onInput(e) {
    this.validate(e.target.value);
  }

  _getValidity(value) {
    return value.length >= 6;
  }
}
window.customElements.define('input-validatable', InputValidatable);
```

### Using custom validators

```html
<cats-only message="Only cats are allowed!"></cats-only>
<input-validatable validator="cats-only"></input-validatable>

<script>
import { LitElement } from 'lit-element';
import { ValidatorMixin } from '@anypoint-web-components/validator-mixin';
import { ValidatableMixin } from '@anypoint-web-components/validatable-mixin';

class CatsOnly extends ValidatorMixin(LitElement) {
  validate(value) {
    return value.match(/^(c|ca|cat|cats)?$/) !== null;
  }
}
window.customElements.define('cats-only', CatsOnly);

class InputValidatable extends ValidatableMixin(LitElement) {
  render() {
    return html`<input @input="${this._onInput}"/>`;
  }

  _onInput(e) {
    this.validate(e.target.value);
  }
}
window.customElements.define('input-validatable', InputValidatable);
</script>
```

## Development

```sh
git clone https://github.com/anypoint-web-components/validator-mixins
cd validator-mixins
npm install
```

### Running the demo locally

```sh
npm start
```

### Running the tests
```sh
npm test
```

---
_Source: https://npm.io/package/@anypoint-web-components/validatable-mixin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._