OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 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/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 <link rel="import" href="../iron-meta/iron-meta.html"> | 12 <link rel="import" href="../iron-meta/iron-meta.html"> |
13 | 13 |
14 <script> | 14 <script> |
15 | 15 |
16 /** | 16 /** |
17 * Use `Polymer.IronValidatableBehavior` to implement an element that validate
s user input. | 17 * `Use Polymer.IronValidatableBehavior` to implement an element that validate
s user input. |
| 18 * Use the related `Polymer.IronValidatorBehavior` to add custom validation lo
gic to an iron-input. |
18 * | 19 * |
19 * ### Accessiblity | 20 * By default, an `<iron-form>` element validates its fields when the user pre
sses the submit button. |
| 21 * To validate a form imperatively, call the form's `validate()` method, which
in turn will |
| 22 * call `validate()` on all its children. By using `Polymer.IronValidatableBeh
avior`, your |
| 23 * custom element will get a public `validate()`, which |
| 24 * will return the validity of the element, and a corresponding `invalid` attr
ibute, |
| 25 * which can be used for styling. |
| 26 * |
| 27 * To implement the custom validation logic of your element, you must override |
| 28 * the protected `_getValidity()` method of this behaviour, rather than `valid
ate()`. |
| 29 * See [this](https://github.com/PolymerElements/iron-form/blob/master/demo/si
mple-element.html) |
| 30 * for an example. |
| 31 * |
| 32 * ### Accessibility |
20 * | 33 * |
21 * Changing the `invalid` property, either manually or by calling `validate()`
will update the | 34 * Changing the `invalid` property, either manually or by calling `validate()`
will update the |
22 * `aria-invalid` attribute. | 35 * `aria-invalid` attribute. |
23 * | 36 * |
24 * @demo demo/index.html | 37 * @demo demo/index.html |
25 * @polymerBehavior | 38 * @polymerBehavior |
26 */ | 39 */ |
27 Polymer.IronValidatableBehavior = { | 40 Polymer.IronValidatableBehavior = { |
28 | 41 |
29 properties: { | 42 properties: { |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
80 }, | 93 }, |
81 | 94 |
82 /** | 95 /** |
83 * @return {boolean} True if the validator `validator` exists. | 96 * @return {boolean} True if the validator `validator` exists. |
84 */ | 97 */ |
85 hasValidator: function() { | 98 hasValidator: function() { |
86 return this._validator != null; | 99 return this._validator != null; |
87 }, | 100 }, |
88 | 101 |
89 /** | 102 /** |
90 * @param {Object} values Passed to the validator's `validate()` function. | 103 * Returns true if the `value` is valid, and updates `invalid`. If you want |
91 * @return {boolean} True if `values` is valid. | 104 * your element to have custom validation logic, do not override this method
; |
| 105 * override `_getValidity(value)` instead. |
| 106 |
| 107 * @param {Object} value The value to be validated. By default, it is passed |
| 108 * to the validator's `validate()` function, if a validator is set. |
| 109 * @return {boolean} True if `value` is valid. |
92 */ | 110 */ |
93 validate: function(values) { | 111 validate: function(value) { |
94 var valid = this._validator && this._validator.validate(values); | 112 this.invalid = !this._getValidity(value); |
95 this.invalid = !valid; | 113 return !this.invalid; |
96 return valid; | 114 }, |
| 115 |
| 116 /** |
| 117 * Returns true if `value` is valid. By default, it is passed |
| 118 * to the validator's `validate()` function, if a validator is set. You |
| 119 * should override this method if you want to implement custom validity |
| 120 * logic for your element. |
| 121 * |
| 122 * @param {Object} value The value to be validated. |
| 123 * @return {boolean} True if `value` is valid. |
| 124 */ |
| 125 |
| 126 _getValidity: function(value) { |
| 127 if (this.hasValidator()) { |
| 128 return this._validator.validate(value); |
| 129 } |
| 130 return true; |
97 } | 131 } |
98 | |
99 }; | 132 }; |
100 | 133 |
101 </script> | 134 </script> |
OLD | NEW |