Skip to content

Commit

Permalink
support for multiple error messages (which are defined in validators)
Browse files Browse the repository at this point in the history
restored main entry in bower json

added resolutions

added property errors for polylint

deleted unused hidden attribute

made errors array in paper input private
  • Loading branch information
tlouisse committed Sep 12, 2016
1 parent b1be52b commit 98993d5
Show file tree
Hide file tree
Showing 10 changed files with 322 additions and 4 deletions.
10 changes: 8 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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"
}
}
3 changes: 3 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
Expand Down
37 changes: 37 additions & 0 deletions demo/validators/no-catfishes.html
Original file line number Diff line number Diff line change
@@ -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>
37 changes: 37 additions & 0 deletions demo/validators/no-cats.html
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 10 additions & 0 deletions paper-input-behavior.html
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
49 changes: 47 additions & 2 deletions paper-input.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
2 changes: 2 additions & 0 deletions test/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
104 changes: 104 additions & 0 deletions test/paper-input_validations.html
Original file line number Diff line number Diff line change
@@ -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>
37 changes: 37 additions & 0 deletions test/validators/cats-only.html
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 98993d5

Please sign in to comment.