Question

我试图在我的聚合物应用程序上进行动态验证我想在输入为空时创建#login-button按钮属性disabled，并在使用id和密码填充imputs时删除此属性。我试过制作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}}的{p> paper-button可能会检查空值。所以我会这样做：

＆＃13;

<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>

＆＃13;

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

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

1 个答案: