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

你说＆＃34;表格一旦有效，按钮就会变成蓝色＆＃34;。这意味着应在每个输入事件之后，或者当用户从输入字段中输出时验证表单。

试试这个：

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

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

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

});

Answer 2

尝试这样的事情。

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

    // Change button if validated here
});

只要在#email_login中更改输入，就会调用change函数，因此每次更改都会进行验证。如果验证成功，请更改按钮（并可能禁用文本字段）

表单有效时更改提交按钮颜色

2 个答案: