support for multiple error messages (which are defined in validators)

bower.json

@@ -32,7 +32,7 @@
     "iron-autogrow-textarea": "PolymerElements/iron-autogrow-textarea#^1.0.0",
     "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
     "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
-    "iron-input": "PolymerElements/iron-input#^1.0.0",
+    "iron-input": "https://github.com/tlouisse/iron-input.git#feature/multipleValidators",
     "paper-styles": "PolymerElements/paper-styles#^1.1.4",
     "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
   },
@@ -42,10 +42,16 @@
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "iron-icon": "PolymerElements/iron-icon#^1.0.0",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
+    "iron-validatable-behavior": "https://github.com/tlouisse/iron-validatable-behavior.git",
+    "iron-validator-behavior": "https://github.com/tlouisse/iron-validator-behavior.git",
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "resolutions": {
+    "iron-validatable-behavior": "feature/multipleValidators",
+    "iron-validator-behavior": "feature/multipleValidators",
+    "iron-input": "feature/multipleValidators"
   }
 }

demo/index.html

@@ -30,6 +30,8 @@
   <link rel="import" href="../paper-input.html">
   <link rel="import" href="../paper-textarea.html">
   <link rel="import" href="ssn-input.html">
+  <link rel="import" href="validators/no-cats.html">
+  <link rel="import" href="validators/no-catfishes.html">
 
   <style is="custom-style" include="demo-pages-shared-styles">
     paper-input {
@@ -110,6 +112,7 @@ <h3>Inputs can validate automatically or on demand, and can have custom error me
         <paper-input label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
         <paper-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]"></paper-input>
         <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
+        <paper-input label="this input has multiple validators (no-cats + no-catfishes)" validator="no-cats no-catfishes" auto-validate></paper-input>
         <button onclick="validate()">Validate!</button>
       </template>
     </demo-snippet>

demo/validators/no-catfishes.html

@@ -0,0 +1,37 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+    Polymer({
+
+        is: 'no-catfishes',
+
+        properties: {
+            message: {
+                type: String,
+                value: 'No cat(fish(es)) allowed'
+            }
+        },
+
+        behaviors: [
+            Polymer.IronValidatorBehavior
+        ],
+
+        validate: function (value) {
+            return !value.match(/cat(fish|fishes)?$/);
+        }
+
+    });
+
+</script>

demo/validators/no-cats.html

@@ -0,0 +1,37 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-validator-behavior/iron-validator-behavior.html">
+
+<script>
+
+    Polymer({
+
+        is: 'no-cats',
+
+        properties: {
+            message: {
+                type: String,
+                value: 'No cat(s) allowed'
+            }
+        },
+
+        behaviors: [
+            Polymer.IronValidatorBehavior
+        ],
+
+        validate: function (value) {
+            return !value.match(/cats?$/);
+        }
+
+    });
+
+</script>

paper-input-behavior.html

@@ -351,6 +351,16 @@
         type: String
       },
 
+      /**
+       * The id used to connect the validator instance implementing IronValidatableBehavior(having a 'for' property)
+       * to the validatable. This is useful for validator instances containing custom messages.
+       * If you're using PaperInputBehavior to implement your own paper-input-like
+       * element, bind this to the `<input is="iron-input">`'s `validatable-id` property.
+       */
+      validatableId: {
+          type: String
+      },
+
       /**
        * If you're using PaperInputBehavior to implement your own paper-input-like
        * element, bind this to the`<input is="iron-input">`'s `multiple` property,

paper-input.html

@@ -142,19 +142,30 @@
         autosave$="[[autosave]]"
         results$="[[results]]"
         accept$="[[accept]]"
-        multiple$="[[multiple]]">
+        multiple$="[[multiple]]"
+        errors="{{_errors}}"
+        validatable-id="[[validatableId]]">
 
       <content select="[suffix]"></content>
 
       <template is="dom-if" if="[[errorMessage]]">
         <paper-input-error aria-live="assertive">[[errorMessage]]</paper-input-error>
       </template>
 
+      <template is="dom-if" if="[[_showErrors(_errors.splices)]]">
+        <paper-input-error aria-live="assertive">
+          <template is="dom-repeat" items="[[_errors]]" filter="_showHighestPrio">
+            <div>[[item.message]]</div>
+          </template>
+        </paper-input-error>
+      </template>
+
       <template is="dom-if" if="[[charCounter]]">
         <paper-input-char-counter></paper-input-char-counter>
       </template>
 
     </paper-input-container>
+
   </template>
 </dom-module>
 
@@ -165,6 +176,40 @@
     behaviors: [
       Polymer.IronFormElementBehavior,
       Polymer.PaperInputBehavior
-    ]
+    ],
+
+    properties: {
+      /*
+       * Errors that are exposed by validatable element.
+       * The error with the highest priority in this list will be shown when validatable is in error state, and no error-message is supplied.
+       * @private
+       */
+      _errors: {
+        type: Array,
+        value: function () {
+          return [];
+        }
+      }
+    },
+
+    /**
+     * Makes sure only error messages with the highest priority are shown.
+     * @param {Object} item The error object to be filtered out.
+     * @return {boolean} whether the item should be shown based on priority
+     */
+    _showHighestPrio: function (item) {
+      return item.priority < 1;
+    },
+
+    /**
+     * Determines whether error with highest priority from errors array needs to be shown.
+     * This error will be visible when property error-message is not supplied and the errors array is not empty.
+     * @param {Array} errors array
+     * @return {boolean} whether error with highest priority from errors array will be shown.
+     */
+    _showErrors: function(_errors) {
+      return !this.errorMessage && _errors;
+    }
+
   });
 </script>

test/index.html

@@ -16,11 +16,13 @@
   <script>
     WCT.loadSuites([
       'paper-input.html',
+      'paper-input_validations.html',
       'paper-textarea.html',
       'paper-input-container.html',
       'paper-input-error.html',
       'paper-input-char-counter.html',
       'paper-input.html?dom=shadow',
+      'paper-input_validations.html?dom=shadow',
       'paper-textarea.html?dom=shadow',
       'paper-input-container.html?dom=shadow',
       'paper-input-error.html?dom=shadow',

test/paper-input_validations.html

@@ -0,0 +1,104 @@
+<!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>
+
+    <title>paper-input tests</title>
+
+    <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">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../iron-test-helpers/test-helpers.js"></script>
+    <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+    <link rel="import" href="../paper-input.html">
+    <link rel="import" href="validators/letters-only.html">
+    <link rel="import" href="validators/cats-only.html">
+
+</head>
+<body>
+
+<test-fixture id="validatable">
+    <template>
+        <paper-input validator="cats-only"></paper-input>
+    </template>
+</test-fixture>
+
+<test-fixture id="error-message">
+    <template>
+        <paper-input pattern="[a-zA-Z]*" error-message="override error"></paper-input>
+    </template>
+</test-fixture>
+
+<test-fixture id="multiple-errors">
+    <template>
+        <paper-input validator="cats-only letters-only"></paper-input>
+    </template>
+</test-fixture>
+
+<script>
+
+    suite('validatable id', function () {
+
+        test('validatable id is passed to input field', function () {
+            var node = fixture('validatable');
+            Polymer.dom(node).flush(function () {
+                assert.equal(node.$.input.validatableId, node.validatableId);
+            });
+        });
+
+    });
+
+    suite('error messages', function () {
+
+        test('show error message defined in external validator', function (done) {
+            var input = fixture('validatable');
+            input.value = 'foobar';
+            input.validate();
+            flush(function () {
+                var error = Polymer.dom(input.root).querySelector('paper-input-error').textContent;
+                assert.include(error, 'No cats');
+                done();
+            });
+        });
+
+        test('always show error message defined via error-message attribute', function (done) {
+            var input = fixture('error-message');
+            input.value = '123';
+            input.validate();
+            flush(function () {
+                var error = Polymer.dom(input.root).querySelector('paper-input-error').textContent;
+                assert.equal(error.trim(), 'override error', 'letters only!');
+                done();
+            });
+        });
+
+        test('show error message with top priority', function (done) {
+            var input = fixture('multiple-errors');
+            input.value = '123';
+            input.validate();
+            flush(function () {
+                var error = Polymer.dom(input.root).querySelector('paper-input-error').textContent;
+                assert.include(error, 'No cats');
+                done();
+            });
+        });
+
+    });
+
+</script>
+
+</body>
+</html>

test/validators/cats-only.html

@@ -0,0 +1,37 @@
+<!--
+@license
+Copyright (c) 2016 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
+-->
+
+<link rel="import" href="../../../polymer/polymer.html">
+<link rel="import" href="../../../iron-validator-behavior/iron-validator-behavior.html">
+
+    <script>
+
+    Polymer({
+
+        is: 'cats-only',
+
+        behaviors: [
+            Polymer.IronValidatorBehavior
+        ],
+
+        properties: {
+            message: {
+                type: String,
+                value: 'No cats'
+            }
+        },
+
+        validate: function (value) {
+            return value === 'cats';
+        }
+
+    });
+
+</script>