纸张输入：不同的错误消息（w 和 w/o 自动验证）

Question

是否可以向 paper-input 元素添加不同的错误消息？让我们假设以下情况：

我有一个注册表，包含 5 个 paper-input 字段。其中两个是电子邮件字段（电子邮件和电子邮件验证）。现在，我将模式放入两个字段以根据有效的电子邮件地址进行验证，并将两个输入字段设置为 auto-validate。 error-message 是自定义的可翻译字符串。完成后看起来像这样：

    <paper-input id="__form_field_email"
                 tabindex="3"
                 label="[[xTranslate('application.modules.users.new.fields.email')]]"
                 auto-validate
                 pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}"
                 error-message="[[xTranslate('application.modules.users.new.error_messages.email_not_valid')]]"></paper-input>

    <paper-input id="__form_field_email_validation"
                 tabindex="4"
                 label="[[xTranslate('application.modules.users.new.fields.email_validation')]]"
                 auto-validate
                 pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}"
                 error-message="[[xTranslate('application.modules.users.new.error_messages.email_not_valid')]]"></paper-input>

一切正常，除了用户在字段中输入了两个不同的电子邮件地址。最后有一个 paper-button 和一个 on-tap 监听器。单击时，表单将得到验证。但是：如果电子邮件地址不匹配，我不能只将错误消息替换为一个（或两个）字段，因为如果用户随后输入无效地址，错误消息将不适用.

是否有可能添加另一个，也许 "standalone" 错误消息？我想过 paper-input-error，但是 invalid 属性是只读的，不能设置。

感谢任何提示。

Answer 1

解决问题的最后一部分，您始终可以通过编写自己的自定义验证器来控制元素的有效性。比如一个这样定义的：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-validator-behavior/iron-validator-behavior.html">

<dom-module id="my-value-match-validator">
  <script>
    /**
     * `my-value-match-validator` Description
     *
     * @summary ShortDescription.
     * @customElement
     * @polymer
     * @extends {Polymer.Element}
     */
    class MyValueMatchValidator extends Polymer.mixinBehaviors([Polymer.IronValidatorBehavior], Polymer.Element) {
      /**
       * String providing the tag name to register the element under.
       */
      static get is() {
        return 'my-value-match-validator';
      }

      /**
       * Object describing property-related metadata used by Polymer features
       */
      static get properties() {
        return {
          name: {
            type: String,
          },
          valueToMatch: {
            type: String,
            value: '',
          },
          allowEmpty: {
            type: Boolean,
            value: false,
          },
          _compareValue: {
            type: String,
            'computed': '_computeCompareValue(valueToMatch, allowEmpty)'
          }
        };
      }

      connectedCallback() {
        super.connectedCallback();
        var validatorName = MyValueMatchValidator.is;
        if (this.name) {
          validatorName = this.name;
        }
        new Polymer.IronMeta({ type: 'validator', key: validatorName, value: this });
      }

      _computeCompareValue(valueToMatch, allowEmpty) {
        if (allowEmpty) {
          return '';
        }
        return valueToMatch;
      }

      validate(value) {
        if (null == value) {
          value = '';
        }
        return this._compareValue === value;
      }

    }

    window.customElements.define(MyValueMatchValidator.is, MyValueMatchValidator);
  </script>

</dom-module>

可以这样使用：

<my-value-match-validator name="match_password" value-to-match="[[password]]" allow-empty="[[!enableConfirmPassword]]"></my-value-match-validator>

<paper-input tabindex="7" id="new_password" label="Change Password" value="{{password}}" type="password" validator="min-length-validator"
error-message="Use at least 6 characters" auto-validate></paper-input>
<paper-input disabled="[[!enableConfirmPassword]]" tabindex="8" id="confirm_new_password" label="Confirm new password" type="password"
auto-validate validator="match_password" error-message="The two passwords need to match" value=""></paper-input>

纸张输入：不同的错误消息（w 和 w/o 自动验证）

paper-input: different error-messages (w and w/o auto-validate)

validation

error-handling

polymer

paper-elements