Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Feature/multiple validators #28

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Feature/multiple validators #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c591eb0
support for multiple custom validators, including error messages
tlouisse Sep 6, 2016
1c4e499
support unique custom validator instances, bound to specific validatable
tlouisse Sep 6, 2016
bf91b92
automically instantiating of custom validators
tlouisse Sep 6, 2016
55959c6
support for native validators
tlouisse Sep 7, 2016
27c7275
demonstration page for new(multiple validators, custom messages, auto…
tlouisse Sep 7, 2016
6e665ff
changed error attr from 'name' to 'validator'
tlouisse Sep 8, 2016
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
12 changes: 11 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,19 @@
"devDependencies": {
"paper-styles": "PolymerElements/paper-styles#^1.0.4",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
"iron-validator-behavior": "https://github.com/tlouisse/iron-validator-behavior.git#feature/multipleValidators",
"paper-input": "https://github.com/tlouisse/paper-input.git#feature/multipleValidators",
"iron-input": "https://github.com/tlouisse/iron-input.git#feature/multipleValidators",
"paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
"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": {
"paper-input": "feature/multipleValidators",
"iron-validator-behavior": "feature/multipleValidators",
"iron-input": "feature/multipleValidators",
"iron-validatable-behavior": "feature/multipleValidators"
}
}
51 changes: 41 additions & 10 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,15 @@
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="cats-only.html">

<link rel="import" href="../../iron-validator-behavior/iron-native-validator.html">

<link rel="import" href="validators/cats-only.html">
<link rel="import" href="validators/no-cats.html">
<link rel="import" href="validators/no-catfishes.html">
<link rel="import" href="validatable-input.html">

<style is="custom-style">
<style is="custom-style" include="paper-styles">

.valid {
color: var(--google-green-500);
Expand All @@ -42,17 +47,44 @@ <h1>&lt;iron-validatable-behavior&gt;</h1>

<template is="dom-bind">

<cats-only></cats-only>

<section>

<cats-only></cats-only>
<p>
only type <code>cats</code>:<br/>

<input is="validatable-input" invalid="{{invalid.a}}" validator="cats-only">
<br/>
<span class="valid" hidden$="[[invalid.a]]">valid</span>
<span class="invalid" hidden$="[[!invalid.a]]">invalid</span>
</p>


<no-catfishes for="customCatfish" message="Custom catfish message"></no-catfishes>
<p>
only type <code>cats</code>:
no <code>cat(fishes)</code>:<br/>

<input is="validatable-input" invalid="{{invalid}}" validator="cats-only">
<input id="multiple" validatable-id="customCatfish" is="validatable-input" invalid="{{invalid.b}}" validator="no-cats no-catfishes" errors="{{errors}}">
<br/>
<span class="valid" hidden$="[[invalid.b]]">valid</span>
<template is="dom-repeat" items="[[errors]]">
<div class="invalid">[[item.priority]]: [[item.message]]</div>
</template>

</p>

<iron-native-validator validator-name="required" message="Please fill in"></iron-native-validator>
<p>
no <code>cat(s)</code> and required:<br/>

<input id="customAndNative" is="validatable-input" invalid="{{invalid.c}}" validator="required no-cats" required errors="{{errors2}}">
<br/>
<span class="valid" hidden$="[[invalid.c]]">valid</span>
<template is="dom-repeat" items="[[errors2]]">
<div class="invalid">[[item.priority]]: [[item.message]]</div>
</template>

<span class="valid" hidden$="[[invalid]]">valid</span>
<span class="invalid" hidden$="[[!invalid]]">invalid</span>
</p>

</section>
Expand All @@ -62,9 +94,8 @@ <h1>&lt;iron-validatable-behavior&gt;</h1>
</div>

<script>

document.querySelector('template[is="dom-bind"]').invalid = false;

var scope = document.querySelector('template[is="dom-bind"]');
scope.invalid = { a: false, b: false, c: false };
</script>

</body>
Expand Down
192 changes: 192 additions & 0 deletions demo/old-vs-new/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!doctype html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Multiple validators - Before and after</title>
<script src="../../../webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="stylesheet" href="../../../prism/themes/prism.css">


<link rel="import" href="../../../paper-styles/demo-pages.html">

<link rel="import" href="no-cats-or-catfishes.html">

<link rel="import" href="../../../paper-input/paper-input.html">
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../paper-dialog/paper-dialog.html">
<link rel="import" href="../../../paper-button/paper-button.html">

<link rel="import" href="native-validators-config.html">


</head>
<body unresolved>


<template is="dom-bind" id="scope">

<script src="../../../prism/prism.js"></script>

<style>
paper-dialog {
width: 976px;
margin: auto;
}
</style>


<native-validators-config></native-validators-config>

<div style="width:1024px; margin:auto;">

<form novalidate id="form">

<h1> Multiple validators </h1>

<p>
Scenario: add an animal with at least two characters, but cats and catfishes are not allowed.
</p>

<h2>Before</h2>
<ul>
<li>Make custom validator for specific case (new web component that combines logic of no-cats and
no-dogs, see no-cats-or-catfishes.html)
</li>
<li>Instantiate custom validator</li>
<li>Add custom validator to input (add to validator attribute)</li>
<li>Add native validators to input (add as attribute)</li>
<li>Add custom error message</li>
<li>Eventually, keep track of validity state and dynamically change the error message</li>
</ul>

<script>

window.addEventListener('WebComponentsReady', function () {
var input = document.getElementById('before').$.input;
var validator = document.getElementById('combinedValidator');
var scope = document.getElementById('scope');

scope.msg = 'Make sure this field is not empty and contains at least two characters. Cats and catfishes are not allowed.';
input.addEventListener('iron-input-validate', function setErrorMessage() {
if (input.validity.valueMissing) {
scope.msg = 'Please fill in this field';
} else if (input.validity.patternMismatch) {
scope.msg = 'Use at least two characters';
/* Note the custom validator can only be assigned to one input when using it to store state of sub validators. */
} else if (!validator.validState.noCats) {
scope.msg = 'No cat(s) allowed';
} else if (!validator.validState.noCatfishes) {
scope.msg = 'No cat(fish(es)) allowed';
}
});
});

</script>

<no-cats-or-catfishes id="combinedValidator"></no-cats-or-catfishes>

<paper-input id="before" label="Your favorite animal (*)" auto-validate
validator="no-cats-or-catfishes" required pattern=".{2,}"
error-message="[[msg]]">
</paper-input>

<paper-button raised onclick="beforeSrc.open()">View sources</paper-button>

<paper-dialog id="beforeSrc">

<h3>Before: sources</h3>

<h4>Javascript</h4>
<pre>
<code class="language-javascript">window.addEventListener('WebComponentsReady', function () {
var input = document.getElementById('before').$.input;
var validator = document.getElementById('combinedValidator');
var scope = document.getElementById('scope');

scope.msg = 'Make sure this field is not empty and contains at least two characters. Cats and catfishes are not allowed.';
input.addEventListener('iron-input-validate', function setErrorMessage() {
if (input.validity.valueMissing) {
scope.msg = 'Please fill in this field';
} else if (input.validity.patternMismatch) {
scope.msg = 'Use at least two characters';
// Note the custom validator can only be assigned to one input when using it to store state of sub validators.
} else if (!validator.validState.noCats) {
scope.msg = 'No cat(s) allowed';
} else if (!validator.validState.noCatfishes) {
scope.msg = 'No cat(fish(es)) allowed';
}
});
});</code>
</pre>

<h4>HTML</h4>


<pre>
<code class="language-html">&lt;no-cats-or-catfishes id=&quot;combinedValidator&quot;&gt;&lt;/no-cats-or-catfishes&gt;

&lt;paper-input id=&quot;before&quot; label=&quot;Your favorite animal (*)&quot; auto-validate
validator=&quot;no-cats-or-catfishes&quot; required pattern=&quot;.{2,}&quot;
error-message=&quot;&#91;&#91;msg&#93;&#93;&quot;&gt;
&lt;/paper-input&gt;</code>
</pre>


<h4>External validator</h4>

<p>See 'no-cats-or-catfishes.html' ...</p>

<div class="buttons">
<paper-button dialog-confirm autofocus>Close</paper-button>
</div>
</paper-dialog>

<h2>After</h2>

<ul>
<li>Add custom validators to input (add to validator attribute)</li>
<li>Add native validators to input (add to validator and as attribute)</li>
</ul>

<p>
(Note that no-cats has a higher priority than no-catfishes and its error message will therefore take
precedence over that of no-catfishes)
</p>

<paper-input id="after" label="Your favorite animal (*)" auto-validate
validator="required pattern no-cats no-catfishes" required pattern=".{2,}">
</paper-input>


<paper-button raised onclick="afterSrc.open()">View sources</paper-button>


<paper-dialog id="afterSrc">
<h3>After: sources</h3>

<h4>HTML</h4>
<pre><code class="language-html">&lt;paper-input id=&quot;after&quot; label=&quot;Your favorite animal (*)&quot; auto-validate
validator=&quot;required pattern no-cats no-catfishes&quot; required pattern=&quot;.{2,}&quot;&gt;
&lt;/paper-input&gt;</code>
</pre>

<h4>Native messages configuration</h4>

<p>See 'native-validators-config.html'(this configuration is needed once on a global level) ...</p>

<div class="buttons">
<paper-button dialog-confirm autofocus>Close</paper-button>
</div>

</paper-dialog>
</form>

</div>

</template>

</body>
</html>
21 changes: 21 additions & 0 deletions demo/old-vs-new/native-validators-config.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-validator-behavior/iron-native-validator.html">

<dom-module id="native-validators-config">
<template>
<!--Register all native validators with a custom message-->
<iron-native-validator validator-name="required" message="Please fill in this field" id="instance"></iron-native-validator>
<iron-native-validator validator-name="max" message="less"></iron-native-validator>
<iron-native-validator validator-name="min" message="more"></iron-native-validator>
<iron-native-validator validator-name="step" message="step"></iron-native-validator>
<iron-native-validator validator-name="maxlength" message="shorter"></iron-native-validator>
<iron-native-validator validator-name="minlength" message="longer"></iron-native-validator>
<iron-native-validator validator-name="pattern" message="either regex or input invalid"></iron-native-validator>
<iron-native-validator validator-name="emailtype" message="no valid e-mail"></iron-native-validator>
<iron-native-validator validator-name="urltype" message="no valid url"></iron-native-validator>
</template>

<script>
Polymer({is: 'native-validators-config'});
</script>
</dom-module>
63 changes: 63 additions & 0 deletions demo/old-vs-new/no-cats-or-catfishes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!--
@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">
<link rel="import" href="../validators/no-cats.html">
<link rel="import" href="../validators/no-catfishes.html">


<dom-module id="no-cats-or-catfishes">

<script>

(function () {

var noCatsValidator;
var noCatFishesValidator;

Polymer({

is: 'no-cats-or-catfishes',

properties: {
validState: {
type: Object,
value: function () {
return {
'noCats': true,
'noCatfishes': true
}
}
}
},

ready: function () {
noCatsValidator = document.createElement('no-cats');
noCatFishesValidator = document.createElement('no-catfishes');
},

behaviors: [
Polymer.IronValidatorBehavior
],

validate: function (value) {
this.validState.noCats = noCatsValidator.validate(value);
this.validState.noCatfishes = noCatFishesValidator.validate(value);
return noCatsValidator.validate(value) && noCatFishesValidator.validate(value);
}

});

}());

</script>

</dom-module>
4 changes: 2 additions & 2 deletions demo/cats-only.html → demo/validators/cats-only.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
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">
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-validator-behavior/iron-validator-behavior.html">

<script>

Expand Down
Loading