allow manual validation

PolymerElements · May 13, 2015 · b962a6d · b962a6d
1 parent 0495aec
commit b962a6d
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 11 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -64,6 +64,17 @@
 
   </section>
 
+  <section>
+
+    <div>Manual Validation</div>
+
+    <paper-input id="inputForValidation" required label="only type letters" pattern="[a-zA-Z]*" error-message="letters only, required input!"></paper-input>
+
+    <br>
+    <button onclick="validate()">Validate!</button>
+
+  </section>
+
   <section>
 
     <div>Character Counter</div>
@@ -94,4 +105,10 @@
 
   </section>
 
+  <script>
+    function validate() {
+      document.getElementById('inputForValidation').validate();
+    }
+  </script>
 </body>
+</html>
diff --git a/paper-input-behavior.html b/paper-input-behavior.html
@@ -180,6 +180,13 @@
       return this.$.input;
     },
 
+    /**
+     * Validates the input element and sets an error style if needed.
+     */
+     validate() {
+       return this.querySelector('paper-input-container').validate(this.inputElement, true);
+     },
+
     _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) {
       return placeholder || alwaysFloatLabel;
     }

diff --git a/paper-input-container.html b/paper-input-container.html
@@ -340,6 +340,29 @@
       this._handleValue(this._inputElement);
     },
 
+    /*
+     * Validate the input element. If displayError is true, then also adds an
+     * error style. Returns whether the input is valid.
+     */
+    validate: function(inputElement, displayError) {
+      var valid = this._checkValidity(inputElement);
+      var value = inputElement[this._propertyForValue] || inputElement.value;
+
+      if (displayError) {
+        this.invalid = !valid;
+      }
+
+      // notify add-ons
+      for (var addon, i = 0; addon = this._addons[i]; i++) {
+        // need to set all of these, or call method... thanks input type="number"!
+        addon.inputElement = inputElement;
+        addon.value = value;
+        if (displayError) {
+          addon.invalid = !valid;
+        }
+      }
+    },
+
     _onAddonAttached: function(event) {
       this._addons.push(event.target);
       this._handleValue(this._inputElement);
@@ -361,7 +384,7 @@
       this._handleValue(event.target);
     },
 
-    _handleValue: function(inputElement) {
+    _checkValidity: function(inputElement) {
       var value = inputElement[this._propertyForValue] || inputElement.value;
 
       var valid;
@@ -380,17 +403,11 @@
         this._inputHasContent = false;
       }
 
-      if (this.autoValidate) {
-        this.invalid = !valid;
-      }
+      return valid;
+    },
 
-      // notify add-ons
-      for (var addon, i = 0; addon = this._addons[i]; i++) {
-        // need to set all of these, or call method... thanks input type="number"!
-        addon.inputElement = inputElement;
-        addon.value = value;
-        addon.invalid = !valid;
-      }
+    _handleValue: function(inputElement) {
+      this.validate(inputElement, this.autoValidate);
     },
 
     _computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {

diff --git a/test/paper-input-container.html b/test/paper-input-container.html
@@ -74,6 +74,15 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="manual-validate-numbers">
+    <template>
+      <paper-input-container attr-for-value="bind-value">
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+
   <letters-only></letters-only>
 
   <test-fixture id="auto-validate-validator">
@@ -200,6 +209,22 @@
         assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class');
       });
 
+      test('styled when the input is set to an invalid value with manual validation', function(done) {
+        var container = fixture('manual-validate-numbers');
+        var input = Polymer.dom(container).querySelector('#i');
+        var label = Polymer.dom(container).querySelector('#l');
+        var line = Polymer.dom(container.root).querySelector('.focused-line');
+        var color = getComputedStyle(label).color;
+        line.addEventListener('transitionend', function() {
+          assert.isTrue(container.invalid, 'invalid is true');
+          assert.notEqual(getComputedStyle(label).color, color, 'label is colored when input is invalid');
+          assert.equal(getTransform(line), 'none', 'line is colored when input is invalid');
+          done();
+        });
+        input.bindValue = 'foobar';
+        container.validate(input, true);
+      });
+
     });
 
   </script>