2

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

$("#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;
});

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

4

4 回答 4

2

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

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

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

于 2012-05-01T00:25:31.643 回答
2

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

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

就像是：

$("#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);    
    }

}
于 2012-05-01T00:26:22.490 回答
2

这是简化代码并使其按预期工作的方法。

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

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;
});
于 2012-05-01T00:29:50.120 回答
2

这是因为您的代码冗余，相同的功能，相同的标识符，相同的逻辑，相同的事件处理程序，每个都没有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;
});
于 2012-05-01T00:39:31.363 回答