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

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

Using _getValidity() function

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

<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

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

Running the demo locally

npm start

Running the tests

npm test

1.1.0 (2020-05-15)

Build

• bumping version f08f82d by Pawel
• bumping version 6c2bcb6 by Pawel

Continuous integration

• updating test name 7f15c44 by Pawel

Update

• removing IronMixin from dependencies a552b49 by Pawel

Features

• adding oninvalid setter 26d5a00 by Pawel
• publishing stable element cbbbf4e by Pawel

Bug Fixes

• upgrading dev deps to fix npm audit errors 6ad6511 by Pawel

Refactor

• upgrading to open-wc standards ddd04f9 by Pawel
• upgrading component to latest ARC standard 1f48ec2 by Pawel

Testing

• updated Travis configuration to connect to Sauce Labs. 47630ed by Pawel
• adding a11y suite 5609913 by Pawel

1.1.1 (2020-05-15)

Build

• bumping version b257372 by Pawel
• bumping version f08f82d by Pawel
• bumping version 6c2bcb6 by Pawel

Continuous integration

• updating test name 7f15c44 by Pawel

Update

• [ci skip] automated merge master->stage. syncing main branches 388e0f9 by Ci agent
• removing IronMixin from dependencies a552b49 by Pawel

Features

• adding oninvalid setter 26d5a00 by Pawel
• publishing stable element cbbbf4e by Pawel

Bug Fixes

• restoring validationstates change event 5986cfe by Pawel
• upgrading dev deps to fix npm audit errors 6ad6511 by Pawel

Refactor

• upgrading to open-wc standards ddd04f9 by Pawel
• upgrading component to latest ARC standard 1f48ec2 by Pawel

Testing

• updated Travis configuration to connect to Sauce Labs. 47630ed by Pawel
• adding a11y suite 5609913 by Pawel