Skip to content

Only show validation errors if user has interacted with the element. … #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 19, 2015
Merged

Only show validation errors if user has interacted with the element. … #151

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2bc2ebd
Only show validation errors if user has interacted with the element. …
mike1o1 Aug 17, 2015
af63dd6
Fix broken unit tests for paper-input
mike1o1 Aug 17, 2015
a1b0390
[paper-input] isInvalid should depend on 'isTouched' and not itself
mike1o1 Aug 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion addon/components/paper-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,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('isInvalid', 'value', function() {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does isInvalid depend on isInvalid?

return this.validate();
}),
renderCharCount: Ember.computed('value', function() {
Expand All @@ -23,6 +23,11 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
}),

validate() {

if (!this.get('isTouched')) {
return false;
}

var returnValue = false;
var currentValue = this.get('value');
var constraints = [
Expand Down Expand Up @@ -74,6 +79,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);
Expand Down
2 changes: 1 addition & 1 deletion tests/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}}
Expand Down
23 changes: 23 additions & 0 deletions tests/unit/components/paper-input-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand All @@ -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();

Expand Down