1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject 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<script> 15 /** 16 * Singleton IronMeta instance. 17 */ 18 Polymer.IronValidatableBehaviorMeta = null; 19 20 /** 21 * `Use Polymer.IronValidatableBehavior` to implement an element that validates user input. 22 * Use the related `Polymer.IronValidatorBehavior` to add custom validation logic to an iron-input. 23 * 24 * By default, an `<iron-form>` element validates its fields when the user presses the submit button. 25 * To validate a form imperatively, call the form's `validate()` method, which in turn will 26 * call `validate()` on all its children. By using `Polymer.IronValidatableBehavior`, your 27 * custom element will get a public `validate()`, which 28 * will return the validity of the element, and a corresponding `invalid` attribute, 29 * which can be used for styling. 30 * 31 * To implement the custom validation logic of your element, you must override 32 * the protected `_getValidity()` method of this behaviour, rather than `validate()`. 33 * See [this](https://github.com/PolymerElements/iron-form/blob/master/demo/simple-element.html) 34 * for an example. 35 * 36 * ### Accessibility 37 * 38 * Changing the `invalid` property, either manually or by calling `validate()` will update the 39 * `aria-invalid` attribute. 40 * 41 * @demo demo/index.html 42 * @polymerBehavior 43 */ 44 Polymer.IronValidatableBehavior = { 45 46 properties: { 47 48 /** 49 * Name of the validator to use. 50 */ 51 validator: { 52 type: String 53 }, 54 55 /** 56 * True if the last call to `validate` is invalid. 57 */ 58 invalid: { 59 notify: true, 60 reflectToAttribute: true, 61 type: Boolean, 62 value: false 63 }, 64 65 /** 66 * This property is deprecated and should not be used. Use the global 67 * validator meta singleton, `Polymer.IronValidatableBehaviorMeta` instead. 68 */ 69 _validatorMeta: { 70 type: Object 71 }, 72 73 /** 74 * Namespace for this validator. This property is deprecated and should 75 * not be used. For all intents and purposes, please consider it a 76 * read-only, config-time property. 77 */ 78 validatorType: { 79 type: String, 80 value: 'validator' 81 }, 82 83 _validator: { 84 type: Object, 85 computed: '__computeValidator(validator)' 86 } 87 }, 88 89 observers: [ 90 '_invalidChanged(invalid)' 91 ], 92 93 registered: function() { 94 Polymer.IronValidatableBehaviorMeta = new Polymer.IronMeta({type: 'validator'}); 95 }, 96 97 _invalidChanged: function() { 98 if (this.invalid) { 99 this.setAttribute('aria-invalid', 'true'); 100 } else { 101 this.removeAttribute('aria-invalid'); 102 } 103 }, 104 105 /** 106 * @return {boolean} True if the validator `validator` exists. 107 */ 108 hasValidator: function() { 109 return this._validator != null; 110 }, 111 112 /** 113 * Returns true if the `value` is valid, and updates `invalid`. If you want 114 * your element to have custom validation logic, do not override this method; 115 * override `_getValidity(value)` instead. 116 117 * @param {Object} value The value to be validated. By default, it is passed 118 * to the validator's `validate()` function, if a validator is set. 119 * @return {boolean} True if `value` is valid. 120 */ 121 validate: function(value) { 122 this.invalid = !this._getValidity(value); 123 return !this.invalid; 124 }, 125 126 /** 127 * Returns true if `value` is valid. By default, it is passed 128 * to the validator's `validate()` function, if a validator is set. You 129 * should override this method if you want to implement custom validity 130 * logic for your element. 131 * 132 * @param {Object} value The value to be validated. 133 * @return {boolean} True if `value` is valid. 134 */ 135 136 _getValidity: function(value) { 137 if (this.hasValidator()) { 138 return this._validator.validate(value); 139 } 140 return true; 141 }, 142 143 __computeValidator: function() { 144 return Polymer.IronValidatableBehaviorMeta && 145 Polymer.IronValidatableBehaviorMeta.byKey(this.validator); 146 } 147 }; 148 149</script> 150