验证数据观察的聚合物输入

Question

我正在尝试对我的 Polymer 应用程序进行动态验证我想在输入为空时创建 #login-button 按钮属性 disabled 并在输入填充 ID 和密码时删除此属性。我试过 make html5 required 属性，但这个解决方案不起作用。现在我创建了 button-click 函数来命中我的 Api 并且我想添加验证函数。

 <form id="form_login">
            <paper-input  aria-required="true"  name="name" floatingLabel label="Id*"
                         value="{{name}}"></paper-input>
            <br>
            <paper-input-decorator floatingLabel label="password">
                <input aria-required="true" id="password" is="core-input" name="password" type="password"
                       value="{{password}}"/>
            </paper-input-decorator>
            <br>


            <div class="page-holder" horizontal layout center center-justified>

            </div>

            <div class="page-holder" horizontal layout center center-justified>
                <paper-button  id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button>
            </div>
        </form>

我的脚本：

    Polymer('login-page',{
        buttonClick: function () {
                this.$.ajaxSubmit.go();
        },
        responseChanged: function (oldValue) {
            console.log(this.response);
            document.querySelector('app-router').go('/profile?hash=dfsasdsf');

        }
    });
</script>

Answer 1

在这种情况下，

disabled?={{!name || !password}} of paper-button 可能会检查空值。所以我会这样做：

<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/core-elements/core-elements.html">

<body fullbleed layout vertical>
  <form-elem></form-elem>
</body>
<polymer-element name="form-elem" noscript>
  <template>
    <paper-input aria-required="true" floatingLabel label="Id*" value="{{name}}"></paper-input>
    <br>
    <paper-input-decorator floatingLabel label="password">
      <input aria-required="true" id="password" is="core-input" type="password" value="{{password}}" />
    </paper-input-decorator>
    <br>
    <div class="page-holder" horizontal layout center center-justified></div>
    <div class="page-holder" horizontal layout center center-justified>
      <paper-button disabled?="{{!name || !password}}" id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button>
    </div>
  </template>
</polymer-element>

如果需要，这里有一个 jsfiddle 版本：jsfiddle

验证数据观察的聚合物输入

Validate polymer input on data observation

polymer