Schaltfläche "Senden" deaktivieren, bis die Eingabefelder ausgefüllt sind.

Question

Ich möchte, dass die Senden-Schaltfläche deaktiviert wird, bis alle Felder ausgefüllt sind. Ich suche im Stackoverflow, kann aber keine Codes anwenden. Ich probiere das, aber dann Felder ausgefüllt gleiche Schaltfläche deaktiviert.

<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

Hier ist Ihre JSFiddle Update. Ich habe nur "deaktiviert" -Eigenschaft auf Senden Schaltfläche in HTML festgelegt. In js Skript initialisieren Sie die Änderungsfunktion an diesen beiden Eingängen.

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

Durch Hinzufügen des Wortes "required" am Ende des Tags wird sichergestellt, dass der Benutzer das Feld ausgefüllt hat, bevor er fortfährt. Siehe unten.

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