禁用提交按鈕，直到輸入字段完成

Question

我想讓提交按鈕被禁用，直到所有字段完成，我在stackoverflow搜索，但我不能應用代碼。我嘗試了這一點，但填寫了相同的禁用按鈕。

<form action="login" method="post"> 
        <input type="text" name="email" id="email" class="input_class_big_e" placeholder="Email"/><br> 
        <input type="password" name="password" id="password1" class="input_class_big_p1" placeholder="Password"/><br><br> 
        <input type="submit" id="confirm_button_login" value="Login"/> 
     </form> 

JQuery的：

$(document).ready(function(){ 
     if ($('#email, #password1').val().length == 0) { 
     $("#confirm_button_login").attr('disabled', 'disabled'); 
     } 
     else { 
     $("#confirm_button_login").removeAttr('disabled'); 
     } 
    }); 

JSFiddle

Answer 1

這是你的JSFiddle更新。我只是在HTML中的提交按鈕上設置'禁用'屬性。在js腳本中初始化這兩個輸入的更改功能。

$(document).ready(function(){ 
    $('#email, #password1').change(function(){ 
     if($("#email").val().length && $("#password1").val().length){ 
       $("#confirm_button_login").prop('disabled', false); 
     } else { 
       $("#confirm_button_login").prop('disabled', true); 
     } 
    }); 
}); 

<input type="submit" id="confirm_button_login" value="Login" disabled="disabled"/> 

Answer 2

在標籤末尾添加單詞「required」，將確保用戶在繼續之前填寫了該字段。見下文。

<form action="login" method="post"> 
    <input type="text" name="email" id="email" class="input_class_big_e" placeholder="Email" required><br> 
    <input type="password" name="password" id="password1" class="input_class_big_p1" placeholder="Password" required><br><br> 
        <input type="submit" id="confirm_button_login" value="Login" required> 
     </form>