javascript - How to add custom validator to paper-input? - Stack Overflow

admin管理员组

文章数量:1203409

Need to add a custom validator which does some complex validation based on the values of other fields in the html.

Tried adding custom validator function as an attribute to the paper-input element but it wont get called at all.

    <dom-module id='custom-ele'>
            <paper-input is="iron-input" id='input_1' label='Label_1' validator='validate_1'></paper-input>
            <paper-input is="iron-input" id='input_2' label='Label_2' validator='validate_2'></paper-input>
            ...
    </dom-module>
    <script>
    Polymer({

        is: 'custom-ele',

        validate_1: function() {
            //validation code
        },

        validate_2: function() {
           //validation code 
        }

    });
    </script>

Need to add a custom validator which does some complex validation based on the values of other fields in the html.

Tried adding custom validator function as an attribute to the paper-input element but it wont get called at all.

    <dom-module id='custom-ele'>
            <paper-input is="iron-input" id='input_1' label='Label_1' validator='validate_1'></paper-input>
            <paper-input is="iron-input" id='input_2' label='Label_2' validator='validate_2'></paper-input>
            ...
    </dom-module>
    <script>
    Polymer({

        is: 'custom-ele',

        validate_1: function() {
            //validation code
        },

        validate_2: function() {
           //validation code 
        }

    });
    </script>

• javascript
• html
• polymer
• polymer-1.0

Share Improve this question Follow asked Aug 12, 2015 at 2:29 AkhAkh 6,0431414 gold badges5454 silver badges8383 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 14

The validator has to implement IronValidatorBehavior (see docs). Also, if you want to validate automatically, you need to set the auto-validate attribute. To achieve your goal you could create a custom validator for each type of validation that you want to use. Alternatively, you could create a generic custom validator and set the validate function upon initialisation. Here's an example.

Polymer({

    is: 'custom-validator',

    behaviors: [
        Polymer.IronValidatorBehavior
    ]
});

<dom-module id='validation-element'>
    <template>
        <custom-validator id="valid1" validator-name="validator1"></custom-validator>
        <custom-validator id="valid2" validator-name="validator2"></custom-validator>
        <paper-input auto-validate id='input_1' label='Label_1' validator='validator1'></paper-input>
        <paper-input auto-validate id='input_2' label='Label_2' validator='validator2'></paper-input>
    </template>
</dom-module>
<script>

    Polymer({

        is: 'validation-element',

        validate1: function(value) {
            //validation code
            console.log("validate1");
            return value.length > 3;
        },

        validate2: function(value) {
            //validation code
            console.log("validate2");
            return value.length > 5;
        },

        ready: function() {
            this.$.valid1.validate = this.validate1.bind(this);
            this.$.valid2.validate = this.validate2.bind(this);
        }

    });

</script>

You can find a working example in this plunk.

Ok, my answer might not be the "Polymer way" but it works and is more the "traditional programmatic" way.

The short list of ideas for this solution:

1. paper-input aka iron-input look-up the value of the validator attribute in the iron-meta global object
2. Each Polymer.IronValidatorBehavior has a name (validatorName), a type ('validator') and a validate function
3. Each Polymer.IronValidatorBehavior registers itself in the corresponding 'validator' list in the iron-meta object

So this is a short code I derived from the points above:

var validator = {
    validatorName: 'my-custom-validator',
    validatorType: 'validator',
    validate:      function(value) { ...my validation code... }
};
new Polymer.IronMeta({
    type: validator.validatorType,
    key: validator.validatorName,
    value: validator
});

You can put this code in any 'attached' or 'created' event handler. But run it before any validation is done of course...

Then you can write

<paper-input validator="my-custom-validator"></paper-input>

If you wanna check if your validator is register with the input, navigate down the dom-tree in any dev-tool and hit: $0.hasValidator() and $0.validator to see if your validator has been successfully registered with the input.

本文标签： javascriptHow to add custom validator to paperinputStack Overflow