Home | History | Annotate | Download | only in iron-validatable-behavior 
      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 <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