フォームが有効なときに送信ボタンの色を変更します。

Question

何かをクリックしたり、送信ボタンをクリックするなどの機能を呼び出すことなく、フォームが有効なときにボタンの色を変更します。フォームが有効になるとすぐに、ボタンが青に変わるはずです。私はこの周りに頭を浮かべることができず、どんな助けでも大歓迎です。

HTML：

<form id="email_login" method="post"> 
    <label for="email" class="form_login" id="email_text">Email</label><br> 
    <input type="text" placeholder="Enter Email" name="email" class="email_login_boxes" id="email_box" > 
    <div class="error" id="error_email"></div> 

    <label for="password" class="form_login" id="password_text">Password</label> 
    <input type="password" placeholder="Enter Password" name="password" class="email_login_boxes" id="password_box" > 
    <div class="error" id="error_password" ></div> 

    <input type="submit" value="LOGIN" id="submit_btn" /> 
</form> 

のjQuery：

$("input").on("keydown", function (e) { 
    return e.which !== 32; 
}); 

$("#error_email").hide(); 
$("#error_password").hide(); 

var error_email = false; 
var error_password = false; 

$("#email_box").click(function(){ 
    $("#error_email").hide(); 
}); 

$("#password_box").click(function(){ 
    $("#error_password").hide(); 
}); 

$("#email_box").focusout(function(){ 
    check_email(); 
}); 

$("#password_box").focusout(function(){ 
    check_password(); 
}); 

function check_email() { 
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i); 

    if(pattern.test($("#email_box").val())) { 
     $("#error_email").hide(); 
    } else { 
     $("#error_email").html("Invalid email address"); 
     $("#error_email").show(); 
     error_email = true; 
    } 

} 

function check_password() { 
    var password_length = $("#password_box").val().length; 
    if (password_length < 5) { 
     $("#error_password").html("Must be greater than 5 characters"); 
     $("#error_password").show(); 
     error_password = true; 
    } else{ 
     $("#error_password").hide(); 
    } 
} 

$("#email_login").submit(function() { 

    error_email = false; 
    error_password = false; 

    check_email(); 
    check_password(); 

    if(error_password == false && error_email == false) { 
     return true; 
    } else { 
     return false; 
    } 

}); 

Answer 1

このような何かを試してみてください。

$("#email_login input").change(function() { 
    // Validating here 

    // Change button if validated here 
}); 

変更機能は、入力が#email_login内で変更されるたびに呼び出されるため、変更があるたびに検証が行われます。検証が成功したら、ボタンを変更してください（おそらくテキストフィールドを無効にしてください）

Answer 2

あなたは「フォームが有効になると、ボタンは青色に変わるはずです。つまり、各入力イベントの後、またはユーザーが入力フィールドからマウスを外したときに、フォームを検証する必要があります。

これを試してみてください：

$("input, textarea").on("keydown keypress keyup paste mouseout", function() { 

    var formValid = validationFunction(), 
     bgColor = formValid ? "blue" : "red"; 

    $("#submit_btn").css("background", bgColor); 

});