A mixin to implement user input validation in a LitElement component
npm install @anypoint-web-components/validatable-mixin
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().
Changing the invalid property, either manually or by calling validate() will update the aria-invalid attribute.
``bash`
npm i @anypoint-web-components/validatable-mixin --save
`javascript
import { LitElement, html } from 'lit-element';
import { ValidatableMixin } from '@anypoint-web-components/validatable-mixin';
class InputValidatable extends ValidatableMixin(LitElement) {
render() {
return html;
}
_onInput(e) {
this.validate(e.target.value);
}
_getValidity(value) {
return value.length >= 6;
}
}
window.customElements.define('input-validatable', InputValidatable);
`
`html
`
`sh`
git clone https://github.com/anypoint-web-components/validator-mixins
cd validator-mixins
npm install
`sh`
npm start
sh
npm test
``