Отключить кнопку отправки до тех пор, пока не будут заполнены поля ввода

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 обновление. Я просто установил свойство «disabled» на кнопку отправки в 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

Добавляя слово «обязательно» в конце тега, убедитесь, что пользователь заполнил поле перед продолжением. Смотри ниже.

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