jQuery - 仅当所有表单字段都有效时才运行加载图形功能答案

【问题标题】：jQuery - Run loading graphic function only if all form fields are validjQuery - 仅当所有表单字段都有效时才运行加载图形功能
【发布时间】：2013-07-19 12:35:45
【问题描述】：

我有以下 javascript 代码来验证带有用户名和密码的简单登录表单 - 如果有影响，它是 asp.net 自定义验证器的客户端验证。

    function userValidation(source, arguments) {
        if (arguments.Value != "" && arguments.Value != "User name") {
            if($(source).parents(".loginPanel").find(".errorAsterisk[style*='visible']").length==0) {
                $(source).parents(".loginPanel").css({ "background-color": "" });
            }
            arguments.IsValid = true;
        } else {
            $(source).parents(".loginPanel").css({ "background-color": "#ECC8C8" });
            arguments.IsValid = false;
        }
    }


    function passwordValidation(source, arguments) {
        var passVal = /^((?![<>]).){1,64}$/;
        if (arguments.Value != "" && arguments.Value != "Password" && passVal.test(arguments.Value)) {
            if($(source).parents(".loginPanel").find(".errorAsterisk[style*='visible']").length==0) {
                $(source).parents(".loginPanel").css({ "background-color": "" });
            }
            arguments.IsValid = true;
        } else {
            $(source).parents(".loginPanel").css({ "background-color": "#ECC8C8" });
            arguments.IsValid = false;
        }
    }

我还希望在用户成功填写表单时显示“正在加载”消息 - 这是我的代码...

    $(".loginPanel").on("click", "input[id*='Login']", function() {
        loadingPage2("", "Logging in...");
    });

麻烦的是，即使页面无效，加载功能也会运行。

有什么想法可以包含它，以便它仅在一切有效的情况下运行？

谢谢

【问题讨论】：

标签： javascript jquery validation

【解决方案1】：

无需查看更多代码，您可以这样做：

var x = [];
function userValidation(source, arguments) {
        if (arguments.Value != "" && arguments.Value != "User name") {
            if($(source).parents(".loginPanel").find(".errorAsterisk[style*='visible']").length==0) {
                $(source).parents(".loginPanel").css({ "background-color": "" });
            }
            arguments.IsValid = true;
            x.push(true);
        } else {
            $(source).parents(".loginPanel").css({ "background-color": "#ECC8C8" });
            arguments.IsValid = false;
        }
    }


    function passwordValidation(source, arguments) {
        var passVal = /^((?![<>]).){1,64}$/;
        if (arguments.Value != "" && arguments.Value != "Password" && passVal.test(arguments.Value)) {
            if($(source).parents(".loginPanel").find(".errorAsterisk[style*='visible']").length==0) {
                $(source).parents(".loginPanel").css({ "background-color": "" });
            }
            arguments.IsValid = true;
            x.push(true);
        } else {
            $(source).parents(".loginPanel").css({ "background-color": "#ECC8C8" });
            arguments.IsValid = false;
        }
    }

function loading(){
    var confirmx = true;
    for (var i = 0; i < x.length; i++) {
        if (x[i] != true) {
            confirmx = false;
        }
    }
    if (confirmx){
        $(".loginPanel").on("click", "input[id*='Login']", function() {
            loadingPage2("", "Logging in...");
        });
    }
}
loading();  // run it!

您唯一需要检查的是此代码是否在所有验证功能之后运行。所以把这段代码放在脚本的末尾。

【讨论】：

嗯，我怕你会这么说，因为我还有很多其他地方需要添加加载图形。是否可以将 var 设置为数组并检查数组中的所有条目是否为真？
如果您不需要知道哪个值为 false，请使用：var x = [] 并在每个函数中添加 x.push(true);。您需要知道哪个值失败了吗？（如果我知道，我可以更新答案）
当然可以...如果它是错误的，我已经添加到数组中，然后在加载函数上检查 x.length ，然后再继续...谢谢

【解决方案2】：

有很多方法可以实现这一点。最简单的方法是设置一个全局变量 e.q. success。在事件处理程序中只需检查此变量的值。

【讨论】：