驗證數據觀察中的聚合物輸入

我試圖對我的聚合物應用程序進行動態驗證當輸入爲空時，我想使#login-button按鈕屬性爲disabled，並在輸入填充id和密碼時刪除此屬性。我試過做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>

來源

2015-04-29 woj_jas

的paper-buttondisabled?={{!name || !password}}可以爲您在這種情況下，空值。因此，這裏是我會怎麼做：

<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

來源

2015-04-29 16:25:13 zunder

作品般的魅力，謝謝！ –

驗證數據觀察中的聚合物輸入

回答

相關問題