<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>iron-validator-behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-meta/iron-meta.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="cats-only.html">
<link rel="stylesheet" href="../../paper-styles/demo.css">
<style>
.valid {
color: limegreen;
}
.invalid {
color: red;
}
</style>
</head>
<body>
<template is="dom-bind">
<cats-only></cats-only>
<section>
<p>
only type <code>cats</code>:
<input on-input="_onInput">
<span class="valid" hidden$="[[!valid]]">valid</span>
<span class="invalid" hidden$="[[valid]]">invalid</span>
</p>
</section>
<section>
<p>
only type <code>cats</code> across both input fields:
<span on-input="_onInputMulti">
<input>
<input>
</span>
<span class="valid" hidden$="[[!validMulti]]">valid</span>
<span class="invalid" hidden$="[[validMulti]]">invalid</span>
</p>
</section>
<section>
<p>
only type <code>cats</code> in the form:
<form on-submit="_onSubmit">
<label>
Type something: <input name="something">
</label>
<br>
<label>
Your favorite pet:
<select name="pet">
<option>iguanas</option>
<option>cats</option>
<option>pancakes</option>
</select>
</label>
<br>
<button type="submit">submit!</button>
<span class="valid" hidden$="[[!validForm]]">valid</span>
<span class="invalid" hidden$="[[validForm]]">invalid</span>
</form>
</p>
</section>
</template>
<script>
document.addEventListener('WebComponentsReady', function() {
var validator = new Polymer.IronMeta({type: 'validator'}).byKey('cats-only');
var scope = document.querySelector('template[is=dom-bind]');
scope.valid = scope.validMulti = scope.validForm = true;
scope._onInput = function(event) {
this.valid = validator.validate(event.target.value);
};
scope._onInputMulti = function(event) {
var values = [];
var nodes = Polymer.dom(event.currentTarget).querySelectorAll('input');
for (var node, i = 0; node = nodes[i]; i++) {
values.push(node.value);
}
this.validMulti = validator.validate(values);
};
scope._onSubmit = function(event) {
event.preventDefault();
var data = {};
for (var el, i = 0; el = event.target.elements[i]; i++) {
if (el.name) {
data[el.name] = el.value;
}
}
this.validForm = validator.validate(data);
};
});
</script>
</body>