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

我不熟悉JQuery，但我认为正在发生的事情是你的3个函数绑定到你的表单，这意味着它们都被称为

当你想要做的是创建1函数validate，调用你的子验证函数。

我还建议您更改子验证方法以返回消息而不是布尔值，这样您就可以在1个警报中显示所有错误。

Answer 2

您有多个警报，因为您将不同的函数绑定到表单的提交事件：每个警报都检查一个不同的字段，并在该字段为空时触发警报。

您只需要在一个函数中移动三个验证步骤，并将该函数绑定到submit事件。

类似的东西：

$("#form1").submit(check);


function check() {
    var isFormValid = true;
    var errors = array();

    $("#first_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Enter Your First Name");
        }
    });

    $("#last_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Enter Your Last Name");
        }
    });

    $("#dropdown").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Select Your Volunteer Choice");
        }
    });

    if (!isFormValid) {
        var errorMsg = "";
        for (var i = 0; i < errors.length; i++) {
            errorMsg += errors[i] +  "\n";  
        }
        alert(errorMsg);    
    }

}

Answer 3

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

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

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

其次，使用单个submit处理程序检查所有内容，如果任何字段未通过验证，则使用return 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;
});

Answer 4

这是因为您的代码冗余，相同的功能，相同的标识符，相同的逻辑，相同的事件处理程序< / em>，每个都没用 id选择器。

唯一不同的是主题。这是我的建议。

$("#form1").submit(function(){ var errors = []; if($("#first_name").val().length == 0){ errors.push("Please Enter Your First Name"); } if($("#last_name").val().length == 0){ errors.push("Please Enter Your Last Name"); } // and so on if(var isFormValid = errors.length > 0) { alert('you have errors'); //errors contains all the error message if you need them } return isFormValid; });

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

4 个答案: