Skip to content
This repository was archived by the owner on May 15, 2023. It is now read-only.

Commit 31989bd

Browse files
author
Yvonne Yip
committed
Merge pull request #1 from PolymerElements/initial-impl
implement iron-validator-behavior
2 parents 6edfafc + 0cda3e7 commit 31989bd

9 files changed

+417
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components

‎bower.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "iron-validator-behavior",
3+
"version": "0.8.0",
4+
"authors": "The Polymer Authors",
5+
"keywords": [
6+
"web-components",
7+
"web-component",
8+
"polymer"
9+
],
10+
"main": [
11+
"iron-validator-behavior.html"
12+
],
13+
"private": true,
14+
"repository": {
15+
"type": "git",
16+
"url": "git://github.com/PolymerElements/iron-validator-behavior.git"
17+
},
18+
"license": "MIT",
19+
"homepage": "https://github.com/PolymerElements/iron-validator-behavior",
20+
"ignore": [],
21+
"dependencies": {
22+
"polymer": "Polymer/polymer#v0.8.0-rc.7",
23+
"iron-meta": "PolymerElements/iron-meta#^0.8.0"
24+
},
25+
"devDependencies": {
26+
"iron-component-page": "PolymerElements/iron-component-page#^0.8.0",
27+
"paper-styles": "PolymerElements/paper-styles#^0.8.0",
28+
"test-fixture": "PolymerElements/test-fixture#^0.8.0",
29+
"web-component-tester": "*",
30+
"webcomponentsjs": "Polymer/webcomponentsjs#^0.6.0"
31+
}
32+
}

‎demo/cats-only.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!--
2+
@license
3+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7+
Code distributed by Google as part of the polymer project is also
8+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9+
-->
10+
11+
<link rel="import" href="../../polymer/polymer.html">
12+
<link rel="import" href="../iron-validator-behavior.html">
13+
14+
<script>
15+
16+
Polymer({
17+
18+
is: 'cats-only',
19+
20+
behaviors: [
21+
Polymer.IronValidatorBehavior
22+
],
23+
24+
validateObject: function(obj) {
25+
var valid = true;
26+
for (key in obj) {
27+
if (obj[key] !== 'cats') {
28+
valid = false;
29+
break;
30+
}
31+
}
32+
return valid;
33+
},
34+
35+
validate: function(values) {
36+
if (typeof values === 'object') {
37+
return this.validateObject(values);
38+
} else {
39+
var value = Array.isArray(values) ? values.join('') : values;
40+
return value.match(/^(c|ca|cat|cats)?$/) !== null;
41+
}
42+
}
43+
44+
});
45+
46+
</script>

‎demo/index.html

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
14+
<meta charset="utf-8">
15+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17+
18+
<title>iron-validator-behavior demo</title>
19+
20+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21+
22+
<link rel="import" href="../../iron-meta/iron-meta.html">
23+
<link rel="import" href="cats-only.html">
24+
25+
<link rel="stylesheet" href="../../paper-styles/demo.css">
26+
27+
<style>
28+
29+
.valid {
30+
color: limegreen;
31+
}
32+
33+
.invalid {
34+
color: red;
35+
}
36+
37+
</style>
38+
39+
</head>
40+
<body>
41+
42+
<template is="x-autobind">
43+
44+
<cats-only></cats-only>
45+
46+
<section>
47+
48+
<p>
49+
only type <code>cats</code>:
50+
51+
<input on-input="_onInput">
52+
53+
<span class="valid" hidden$="[[!valid]]">valid</span>
54+
<span class="invalid" hidden$="[[valid]]">invalid</span>
55+
</p>
56+
57+
</section>
58+
59+
<section>
60+
61+
<p>
62+
only type <code>cats</code> across both input fields:
63+
64+
<span on-input="_onInputMulti">
65+
<input>
66+
<input>
67+
</span>
68+
69+
<span class="valid" hidden$="[[!validMulti]]">valid</span>
70+
<span class="invalid" hidden$="[[validMulti]]">invalid</span>
71+
</p>
72+
73+
</section>
74+
75+
<section>
76+
77+
<p>
78+
only type <code>cats</code> in the form:
79+
80+
<form on-submit="_onSubmit">
81+
<label>
82+
Type something: <input name="something">
83+
</label>
84+
<br>
85+
<label>
86+
Your favorite pet:
87+
<select name="pet">
88+
<option>iguanas</option>
89+
<option>cats</option>
90+
<option>pancakes</option>
91+
</select>
92+
</label>
93+
<br>
94+
<button type="submit">submit!</button>
95+
<span class="valid" hidden$="[[!validForm]]">valid</span>
96+
<span class="invalid" hidden$="[[validForm]]">invalid</span>
97+
</form>
98+
99+
</p>
100+
101+
</section>
102+
103+
</template>
104+
105+
<script>
106+
107+
var validator = new Polymer.IronMeta({type: 'validator'}).byKey('cats-only');
108+
109+
var scope = document.querySelector('template[is=x-autobind]');
110+
scope.valid = scope.validMulti = scope.validForm = true;
111+
112+
scope._onInput = function(event) {
113+
this.valid = validator.validate(event.target.value);
114+
};
115+
116+
scope._onInputMulti = function(event) {
117+
var values = [];
118+
var nodes = Polymer.dom(event.currentTarget).querySelectorAll('input');
119+
for (var node, i = 0; node = nodes[i]; i++) {
120+
values.push(node.value);
121+
}
122+
this.validMulti = validator.validate(values);
123+
};
124+
125+
scope._onSubmit = function(event) {
126+
event.preventDefault();
127+
128+
var data = {};
129+
for (var el, i = 0; el = event.target.elements[i]; i++) {
130+
if (el.name) {
131+
data[el.name] = el.value;
132+
}
133+
}
134+
this.validForm = validator.validate(data);
135+
};
136+
137+
</script>
138+
139+
</body>

‎index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
14+
<meta charset="utf-8">
15+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
16+
17+
<title>iron-validator-behavior</title>
18+
19+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
20+
21+
<link rel="import" href="../polymer/polymer.html">
22+
<link rel="import" href="../iron-component-page/iron-component-page.html">
23+
24+
</head>
25+
<body>
26+
27+
<iron-component-page></iron-component-page>
28+
29+
</body>
30+
</html>

‎iron-validator-behavior.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!--
2+
@license
3+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7+
Code distributed by Google as part of the polymer project is also
8+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9+
-->
10+
11+
<link rel="import" href="../polymer/polymer.html">
12+
<link rel="import" href="../iron-meta/iron-meta.html">
13+
14+
<!--
15+
Use `Polymer.IronValidatorBehavior` to implement a custom input/form validator. Element instances
16+
implementing this behavior will be registered for use in elements that implement
17+
`Polymer.IronValidatableBehavior`.
18+
-->
19+
20+
<script>
21+
22+
Polymer.IronValidatorBehavior = {
23+
24+
properties: {
25+
26+
/**
27+
* Namespace for this validator.
28+
*/
29+
validatorType: {
30+
type: String,
31+
value: 'validator'
32+
},
33+
34+
/**
35+
* Name for this validator, used by `Polymer.IronValidatableBehavior` to lookup this element.
36+
*/
37+
validatorName: {
38+
type: String,
39+
value: function() {
40+
return this.is;
41+
}
42+
}
43+
44+
},
45+
46+
ready: function() {
47+
new Polymer.IronMeta({type: this.validatorType, key: this.validatorName, value: this});
48+
},
49+
50+
/**
51+
* Implement custom validation logic in this function.
52+
*
53+
* @method validate
54+
*/
55+
/*
56+
validate: function(values) {
57+
}
58+
*/
59+
60+
};
61+
62+
</script>

‎test/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
14+
<title>paper-validator-behavior tests</title>
15+
16+
<meta charset="utf-8">
17+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
18+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
19+
20+
<script src="../../web-component-tester/browser.js"></script>
21+
22+
</head>
23+
<body>
24+
25+
<script>
26+
27+
WCT.loadSuites([
28+
'iron-validator-behavior.html'
29+
]);
30+
31+
</script>
32+
33+
</body>
34+
</html>

‎test/iron-validator-behavior.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<!--
3+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7+
Code distributed by Google as part of the polymer project is also
8+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9+
-->
10+
<html>
11+
<head>
12+
<meta charset="UTF-8">
13+
<title>iron-validator-behavior basic tests</title>
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
15+
16+
<script src="../../webcomponentsjs/webcomponents.js"></script>
17+
<script src="../../web-component-tester/browser.js"></script>
18+
<script src="../../test-fixture/test-fixture-mocha.js"></script>
19+
20+
<link href="../../test-fixture/test-fixture.html" rel="import">
21+
<link href="../../iron-meta/iron-meta.html" rel="import">
22+
<link href="simple-validator.html" rel="import">
23+
24+
</head>
25+
<body>
26+
27+
<test-fixture id="basic">
28+
<template>
29+
<simple-validator></simple-validator>
30+
</template>
31+
</test-fixture>
32+
33+
<script>
34+
35+
suite('basic', function() {
36+
37+
test('registered in <iron-meta>', function() {
38+
fixture('basic');
39+
assert.ok(new Polymer.IronMeta({type: 'validator'}).byKey('simple-validator'), 'simple-validator found in <iron-meta>');
40+
});
41+
42+
});
43+
44+
</script>
45+
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)