2015-06-26 20:27:38 -07:00
|
|
|
<!--
|
|
|
|
@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-meta/iron-meta.html">
|
|
|
|
|
|
|
|
<script>
|
2016-04-26 12:33:09 -07:00
|
|
|
/**
|
|
|
|
* Singleton IronMeta instance.
|
|
|
|
*/
|
|
|
|
Polymer.IronValidatableBehaviorMeta = null;
|
2015-06-26 20:27:38 -07:00
|
|
|
|
|
|
|
/**
|
2015-12-14 08:43:03 -07:00
|
|
|
* `Use Polymer.IronValidatableBehavior` to implement an element that validates user input.
|
|
|
|
* Use the related `Polymer.IronValidatorBehavior` to add custom validation logic to an iron-input.
|
|
|
|
*
|
|
|
|
* By default, an `<iron-form>` element validates its fields when the user presses the submit button.
|
|
|
|
* To validate a form imperatively, call the form's `validate()` method, which in turn will
|
|
|
|
* call `validate()` on all its children. By using `Polymer.IronValidatableBehavior`, your
|
|
|
|
* custom element will get a public `validate()`, which
|
|
|
|
* will return the validity of the element, and a corresponding `invalid` attribute,
|
|
|
|
* which can be used for styling.
|
|
|
|
*
|
|
|
|
* To implement the custom validation logic of your element, you must override
|
|
|
|
* the protected `_getValidity()` method of this behaviour, rather than `validate()`.
|
|
|
|
* See [this](https://github.com/PolymerElements/iron-form/blob/master/demo/simple-element.html)
|
|
|
|
* for an example.
|
2015-06-26 20:27:38 -07:00
|
|
|
*
|
2015-08-05 18:21:18 -07:00
|
|
|
* ### Accessibility
|
2015-06-26 20:27:38 -07:00
|
|
|
*
|
|
|
|
* Changing the `invalid` property, either manually or by calling `validate()` will update the
|
|
|
|
* `aria-invalid` attribute.
|
|
|
|
*
|
|
|
|
* @demo demo/index.html
|
|
|
|
* @polymerBehavior
|
|
|
|
*/
|
|
|
|
Polymer.IronValidatableBehavior = {
|
|
|
|
|
|
|
|
properties: {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Name of the validator to use.
|
|
|
|
*/
|
|
|
|
validator: {
|
|
|
|
type: String
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* True if the last call to `validate` is invalid.
|
|
|
|
*/
|
|
|
|
invalid: {
|
|
|
|
notify: true,
|
|
|
|
reflectToAttribute: true,
|
|
|
|
type: Boolean,
|
|
|
|
value: false
|
|
|
|
},
|
|
|
|
|
2016-04-26 12:33:09 -07:00
|
|
|
/**
|
|
|
|
* This property is deprecated and should not be used. Use the global
|
|
|
|
* validator meta singleton, `Polymer.IronValidatableBehaviorMeta` instead.
|
|
|
|
*/
|
2015-06-26 20:27:38 -07:00
|
|
|
_validatorMeta: {
|
|
|
|
type: Object
|
2016-04-26 12:33:09 -07:00
|
|
|
},
|
2015-06-26 20:27:38 -07:00
|
|
|
|
2016-04-26 12:33:09 -07:00
|
|
|
/**
|
|
|
|
* Namespace for this validator. This property is deprecated and should
|
|
|
|
* not be used. For all intents and purposes, please consider it a
|
|
|
|
* read-only, config-time property.
|
|
|
|
*/
|
|
|
|
validatorType: {
|
|
|
|
type: String,
|
|
|
|
value: 'validator'
|
|
|
|
},
|
|
|
|
|
|
|
|
_validator: {
|
2016-05-05 18:02:24 -07:00
|
|
|
type: Object,
|
2016-04-26 12:33:09 -07:00
|
|
|
computed: '__computeValidator(validator)'
|
|
|
|
}
|
2015-06-26 20:27:38 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
observers: [
|
|
|
|
'_invalidChanged(invalid)'
|
|
|
|
],
|
|
|
|
|
2016-04-26 12:33:09 -07:00
|
|
|
registered: function() {
|
|
|
|
Polymer.IronValidatableBehaviorMeta = new Polymer.IronMeta({type: 'validator'});
|
2015-06-26 20:27:38 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
_invalidChanged: function() {
|
|
|
|
if (this.invalid) {
|
|
|
|
this.setAttribute('aria-invalid', 'true');
|
|
|
|
} else {
|
|
|
|
this.removeAttribute('aria-invalid');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @return {boolean} True if the validator `validator` exists.
|
|
|
|
*/
|
|
|
|
hasValidator: function() {
|
|
|
|
return this._validator != null;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2015-08-05 18:21:18 -07:00
|
|
|
* Returns true if the `value` is valid, and updates `invalid`. If you want
|
|
|
|
* your element to have custom validation logic, do not override this method;
|
|
|
|
* override `_getValidity(value)` instead.
|
|
|
|
|
|
|
|
* @param {Object} value The value to be validated. By default, it is passed
|
|
|
|
* to the validator's `validate()` function, if a validator is set.
|
|
|
|
* @return {boolean} True if `value` is valid.
|
|
|
|
*/
|
|
|
|
validate: function(value) {
|
|
|
|
this.invalid = !this._getValidity(value);
|
|
|
|
return !this.invalid;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns true if `value` is valid. By default, it is passed
|
|
|
|
* to the validator's `validate()` function, if a validator is set. You
|
|
|
|
* should override this method if you want to implement custom validity
|
|
|
|
* logic for your element.
|
|
|
|
*
|
|
|
|
* @param {Object} value The value to be validated.
|
|
|
|
* @return {boolean} True if `value` is valid.
|
2015-06-26 20:27:38 -07:00
|
|
|
*/
|
2015-08-05 18:21:18 -07:00
|
|
|
|
|
|
|
_getValidity: function(value) {
|
2015-07-13 14:26:11 -07:00
|
|
|
if (this.hasValidator()) {
|
2015-08-05 18:21:18 -07:00
|
|
|
return this._validator.validate(value);
|
2015-07-13 14:26:11 -07:00
|
|
|
}
|
2015-08-05 18:21:18 -07:00
|
|
|
return true;
|
2016-04-26 12:33:09 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
__computeValidator: function() {
|
|
|
|
return Polymer.IronValidatableBehaviorMeta &&
|
|
|
|
Polymer.IronValidatableBehaviorMeta.byKey(this.validator);
|
2015-06-26 20:27:38 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
</script>
|