Scenario: add an animal with at least two characters, but cats and catfishes are not allowed.
Before: sources
Javascript
window.addEventListener('WebComponentsReady', function () {
var input = document.getElementById('before').$.input;
var validator = document.getElementById('combinedValidator');
var scope = document.getElementById('scope');
scope.msg = 'Make sure this field is not empty and contains at least two characters. Cats and catfishes are not allowed.';
input.addEventListener('iron-input-validate', function setErrorMessage() {
if (input.validity.valueMissing) {
scope.msg = 'Please fill in this field';
} else if (input.validity.patternMismatch) {
scope.msg = 'Use at least two characters';
// Note the custom validator can only be assigned to one input when using it to store state of sub validators.
} else if (!validator.validState.noCats) {
scope.msg = 'No cat(s) allowed';
} else if (!validator.validState.noCatfishes) {
scope.msg = 'No cat(fish(es)) allowed';
}
});
});
HTML
<no-cats-or-catfishes id="combinedValidator"></no-cats-or-catfishes>
<paper-input id="before" label="Your favorite animal (*)" auto-validate
validator="no-cats-or-catfishes" required pattern=".{2,}"
error-message="[[msg]]">
</paper-input>
External validator
See 'no-cats-or-catfishes.html' ...
(Note that no-cats has a higher priority than no-catfishes and its error message will therefore take
precedence over that of no-catfishes)