Merge pull request #151 from mike1o1/display-errors-on-blur

Only show validation errors if user has interacted with the element. …
adopted-ember-addons · Aug 19, 2015 · b4d8e2d · b4d8e2d
2 parents 598606a + a1b0390
commit b4d8e2d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js
@@ -15,7 +15,7 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
   inputElementId: Ember.computed('elementId', function() {
     return 'input-' + this.get('elementId');
   }),
-  isInvalid: Ember.computed('value', function() {
+  isInvalid: Ember.computed('isTouched', 'value', function() {
     return this.validate();
   }),
   renderCharCount: Ember.computed('value', function() {
@@ -25,6 +25,11 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
   iconFloat: Ember.computed.and('icon', 'label'),
 
   validate() {
+
+    if (!this.get('isTouched')) {
+      return false;
+    }
+
     var returnValue = false;
     var currentValue = this.get('value');
     var constraints = [
@@ -76,6 +81,7 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
     focusOut(value) {
       this.sendAction('focus-out', value);
       this.set('focus',false);
+      this.set('isTouched', true);
     },
     keyDown(value, event) {
       this.sendAction('key-down', value, event);

diff --git a/tests/index.html b/tests/index.html
@@ -17,7 +17,7 @@
     {{content-for 'head-footer'}}
     {{content-for 'test-head-footer'}}
   </head>
-  <body>
+  <body style="overflow: auto;">
 
     {{content-for 'body'}}
     {{content-for 'test-body'}}

diff --git a/tests/unit/components/paper-input-test.js b/tests/unit/components/paper-input-test.js
@@ -37,6 +37,7 @@ test('it sets isInvalid as true when required is true and text has no value', fu
 
   component.set('required', true);
   component.set('value', '');
+  component.set('isTouched', true);
 
   assert.equal(component.get('isInvalid'), true, 'isInvalid is false');
 });
@@ -47,17 +48,29 @@ test('it does not set isInvalid when required is true and text has value', funct
 
   component.set('required', true);
   component.set('value', 'Ember Paper');
+  component.set('isTouched', true);
 
   assert.equal(component.get('isInvalid'), false, 'isInvalid is true with a value');
 });
 
+test('it does not set isInvalid when required is true, text has no value and isTouched is false', function(assert) {
+  assert.expect(1);
+  var component = this.subject();
+  component.set('required', true);
+  component.set('value', '');
+  component.set('isTouched', false);
+
+  assert.equal(component.get('isInvalid'), false, 'isInvalid is true');
+});
+
 test('it adds md-input-invalid css class when isInvalid', function(assert) {
   assert.expect(2);
   var inputGroup,
       component = this.subject();
 
   component.set('required', true);
   component.set('value', '');
+  component.set('isTouched', true);
 
   this.render();
 
@@ -77,6 +90,7 @@ test('it sets error text when isInvalid', function(assert) {
   component.set('required', true);
   component.set('value', '');
   component.set('errorText', expectedError);
+  component.set('isTouched', true);
 
   this.render();
 
@@ -99,6 +113,7 @@ test('validates min with default error', function(assert) {
 
   component.set('min', 3);
   component.set('value', 2);
+  component.set('isTouched', true);
 
   this.render();
 
@@ -121,6 +136,7 @@ test('validates min with custom error', function(assert) {
   component.set('min', 3);
   component.set('min-errortext', expectedError);
   component.set('value', 2);
+  component.set('isTouched', true);
 
   this.render();
 
@@ -141,6 +157,7 @@ test('validates min with no error', function(assert) {
 
   component.set('min', 3);
   component.set('value', 3);
+  component.set('isTouched', true);
 
   this.render();
 
@@ -162,6 +179,7 @@ test('validates max with default error', function(assert) {
 
   component.set('max', 3);
   component.set('value', 4);
+  component.set('isTouched', true);
 
   this.render();
 
@@ -184,6 +202,7 @@ test('validates max with custom error', function(assert) {
   component.set('max', 3);
   component.set('max-errortext', expectedError);
   component.set('value', 4);
+  component.set('isTouched', true);
 
   this.render();
 
@@ -204,6 +223,7 @@ test('validates max with no error', function(assert) {
 
   component.set('max', 3);
   component.set('value', 3);
+  component.set('isTouched', true);
 
   this.render();
 
@@ -226,6 +246,7 @@ test('validates maxlength with default error', function(assert) {
 
   component.set('maxlength', 10);
   component.set('value', 'This is a test');
+  component.set('isTouched', true);
 
   this.render();
 
@@ -251,6 +272,7 @@ test('validates maxlength with custom error', function(assert) {
   component.set('maxlength', 10);
   component.set('maxlength-errortext', expectedError);
   component.set('value', 'This is a test');
+  component.set('isTouched', true);
 
   this.render();
 
@@ -275,6 +297,7 @@ test('validates maxlength with no error', function(assert) {
 
   component.set('maxlength', 10);
   component.set('value', 'Testing...');
+  component.set('isTouched', true);
 
   this.render();