How to add a custom validator to paper input?

Question

You need to add a custom validator that does some sophisticated validation based on the values ​​of other fields in html.

I tried to add a custom validator function as an attribute to the paper input element, but it is not 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> 

Answer 1

The validator must implement IronValidatorBehavior (see docs ). In addition, if you want to automatically check, you need to set the auto-validate attribute. To achieve your goal, you can create your own validator for each type of validation that you want to use. In addition, you can create a generic custom validator and set the validation function after initialization. Here is 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 .

Answer 2

Well, my answer may not be the "Polymer way", but it works and is a more "traditional programmatic" way.

A short list of ideas for this solution:

• input into the document, as well as search in hardware, look at the value of the validator attribute in the global iron-meta object.
• Each Polymer.IronValidatorBehavior has a name (validatorName), type ('validator') and a validation function
• Each Polymer.IronValidatorBehavior is registered in the corresponding "validator" list in the iron-meta object li>

So this is the short code I got from the above points:

 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 check is done, of course ...

Then you can write

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

If you want to check if your validator is registered at the entrance, go down the dom-tree in any dev-tool and press: $0.hasValidator() and $0.validator to check if your validator has been successfully registered at the entrance.