Use IronValidatorBehavior to implement a custom input/form validator. Element
instances implementing this behavior will be registered for use in elements that implement
IronValidatableBehavior.
See: Documentation, Demo.
npm install --save @polymer/iron-validator-behavior
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronValidatorBehavior} from '@polymer/iron-validator-behavior/iron-validator-behavior.js';
class SampleValidator extends mixinBehaviors([IronValidatorBehavior], PolymerElement){
// This validator only validates strings, and is only valid if
// the value is "cat".
function validate(value) {
return value === 'cat';
}
}
customElements.define('sample-validator', SampleValidator);<html>
<head>
<script type="module">
import '../sample-validator.js';
</script>
</head>
<body>
<sample-validator id="aValidator"></sample-validator>
<input id="input">
<script>
input.addEventListener('input', function(event) {
var valid = aValidator.validate(input.value);
if (valid)
input.removeAttribute('invalid');
else
input.setAttribute('invalid', true);
});
</script>
</body>
</html>If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/PolymerElements/iron-validator-behavior
cd iron-validator-behavior
npm install
npm install -g polymer-clipolymer serve --npm
open http://127.0.0.1:<port>/demo/polymer test --npm