1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<link rel="import" href="../../polymer/polymer.html"> 11<link rel="import" href="../../iron-validatable-behavior/iron-validatable-behavior.html"> 12 13<dom-module id="cats-only"> 14 <template> 15 <style> 16 :host { 17 display: inline-block; 18 } 19 input { 20 width: 250px; 21 } 22 :host([invalid]) input { 23 border-color: red; 24 } 25 </style> 26 <input value="{{value}}" id="input" placeholder="Type 'cats' to prove you like cats"> 27 </template> 28</dom-module> 29 30<script> 31 32 Polymer({ 33 is: 'cats-only', 34 35 properties: { 36 value: { 37 type: String 38 }, 39 40 name: { 41 type: String 42 } 43 }, 44 45 behaviors: [ 46 Polymer.IronValidatableBehavior 47 ], 48 49 listeners: { 50 'input': '_onInput' 51 }, 52 53 _onInput: function() { 54 this.value = this.$.input.value; 55 }, 56 57 // Overidden from Polymer.IronValidatableBehavior. Will set the `invalid` 58 // attribute automatically, which should be used for styling. 59 _getValidity: function() { 60 return this.value === 'cats'; 61 } 62 63 }); 64 65</script> 66