フォームが無効なときにボタンを無効にする方法はありますか？

Question

基本的に電子メールとパスワードのフォームを含むカスタム要素があります

電子メールまたはパスワードが入力されていないときにボタンを無効にする手段はありますか？

私の要素の下に見つけてください：

 <paper-dialog id="dialog"> 
    <h2>Login</h2> 

     <paper-input id="zumbuza" type="email" is="iron-input" label="Email" type="text" bind-value="{{user.email}}" auto-validate error-message="Auto v"></paper-input> 


    <paper-input-container> 
     <label>Passwrod</label> 
     <input is="iron-input" type="password" bind-value="{{user.password}}"></input> 
    </paper-input-container> 

    <paper-button toggles raised active class="colorful">Submit</paper-button> 

    </paper-dialog> 

Answer 1

を試すことができます。 Polymerには「鉄フォーム」というカスタム要素があります。デモがあります：https://elements.polymer-project.org/elements/iron-form?view=demo:demo/index.html&active=iron-form

以下のコードはそこからストレートコピー貼りです。それを見て、私はあなたがそれを理解すると思います。

<form is="iron-form" method="get" action="/" id="eventsDemo"> 
    <paper-input name="name" label="Name" required auto-validate></paper-input> 
    <paper-input name="password" label="Password" type="password" required auto-validate></paper-input> 
    <paper-checkbox name="read" required>You must check this box</paper-checkbox><br> 
    <paper-button raised onclick="_delayedSubmit(event)" disabled id="eventsDemoSubmit"> 
    <paper-spinner id="spinner" hidden></paper-spinner>Submit</paper-button> 
    <paper-button raised onclick="_reset(event)">Reset</paper-button> 
    <div class="output"></div> 
</form> 
<script> 
    eventsDemo.addEventListener('change', function(event) { 
    // Validate the entire form to see if we should enable the `Submit` button. 
    eventsDemoSubmit.disabled = !eventsDemo.validate(); 
    }); 
    function _delayedSubmit(event) { 
    spinner.active = true; 
    spinner.hidden = false; 
    eventsDemoSubmit.disabled = true; 
    // Simulate a slow server response. 
    setTimeout(function() { 
     Polymer.dom(event).localTarget.parentElement.submit(); 
    }, 1000); 
    } 
    function _reset(event) { 
    var form = Polymer.dom(event).localTarget.parentElement 
    form.reset(); 
    form.querySelector('.output').innerHTML = ''; 
    } 
    document.getElementById('eventsDemo').addEventListener('iron-form-submit', function(event) { 
    spinner.active = false; 
    spinner.hidden = true; 
    eventsDemoSubmit.disabled = false; 
    this.querySelector('.output').innerHTML = JSON.stringify(event.detail); 
    }); 
</script> 

Answer 2

あなたは、検証のために私の知っている最も簡単な方法は、フォームでこの使用して、JS

$(".submit-name").attr("disabled", "true"); 
    $(".control-name").blur(function(){ 
     if ($(this).val() != "") { 
      $(".submit-name").removeAttr("disabled"); 
     } else { 
      $(".submit-name").attr("disabled", "true");   
     } 
    });