javascript - 为什么这些警报成倍增加？

Question

好的，我有几个输入。我有这段代码来验证它们。

$("#form1").submit(function(){
    var isFormValid = true;

    $("#first_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Enter Your First Name");
    return isFormValid;
});

$("#form1").submit(function(){
    var isFormValid = true;

    $("#last_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Enter Your Last Name");
    return isFormValid;
});    

    $("#form1").submit(function(){
    var isFormValid = true;

    $("#dropdown").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Select Your Volunteer Choice");
    return isFormValid;
});

出于某种原因，我收到一条消息后收到一条消息。我的目标是，它只向我显示下一个尚未显示的字段，而不是同时显示所有字段。如果您有任何问题，请发表评论，这很难解释……在您给我机会更好地解释之前，请不要投反对票。

Answer 1

以下是如何简化您的代码，并使其按预期工作。

首先，由于您使用相同的方法来验证所有字段，因此将其包装在一个函数中而不是重复代码:

function isFieldEmpty(jQuerySelector) {
    return $.trim($(jQuerySelector).val()).length == 0
}

其次，使用单个 submit 处理程序检查所有内容，如果任何字段未通过验证，则返回 false:

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

    if(isFieldEmpty('#first_name')) {
        alert("Please Enter Your First Name");
        return false;
    }

    if(isFieldEmpty('#last_name')) {
        alert("Please Enter Your Last Name");
        return false;
    }

    if(isFieldEmpty('#dropdown')) {
        alert("Please Select Your Volunteer Choice");
        return false;
    }

    // Will return true only if all fields passed
    return true;
});