Javascript jQuery验证：确定字段是在表单提交时验证的，还是差异事件？

我对一些表单使用jQuery验证。我如何确定在提交表单时是否验证了字段，而不是从单独的事件（如加密、模糊等）中验证

例如，在中，单击“提交”会在“表单提交”消息之前打印两条“验证：成功”消息。我希望仅在提交表单时才停止打印“验证：成功”消息

$("form").validate({
    success: function(label, element) {
        $(element).next(".help")
        .addClass("valid").removeClass("invalid");
    },
    onkeyup: function(element, event) {
        return this.element(element);  
    },
    errorPlacement: function(error, element) {
        var help = $(element).next(".help");
        if (error.html().length === 0) {
            log("Validation: success");
            help
            .addClass("valid").removeClass("invalid")
            .html(originalHelp[element.attr("id")]);
        } else {
            log("Validation: failure");
            help
            .addClass("invalid").removeClass("valid")
            .html(error.html());
        }
    },
    submitHandler: function(form) {
        log("Form submitted"); 
    },
    rules: {
        firstname: "required",
        surname: "required"
    }
});

---

为清晰起见进行了编辑，希望这会更有意义。

关于如何构建这一点，有很多问题，我不知道从哪里开始。基本上，您已经修改了回调函数，几乎插件的所有内置功能都被破坏或禁用

errorPlacement

回调仅用于在布局中放置消息标签您绝对不希望在此函数中添加/删除错误类。这是插件已经自动处理的内容

errorElement: "p", // default is 'label'
messages: {
    firstname: "Please enter a first name.",
    surname: "Please enter a surname."
}

success

回调用于在字段有效时放置错误标签。通常，在字段通过验证后，人们使用它在字段旁边放置绿色复选标记等。它可能是你可以使用的东西

也就是说，您可能可以使用

取消高亮显示

和

高亮显示

回调函数来切换类。。。这与默认情况下插件的工作方式非常接近

validClass: "valid",  // default
errorClass: "invalid", // default is "error"
highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
    $(element).addClass(validClass).removeClass(errorClass);
},

您不需要在

onkeyup

函数中使用

return

onkeyup: function(element, event) {
    this.element(element);  
},

您还试图在自己的容器中使用自己的错误消息。相反，利用它可以自动创建和切换错误

errorElement: "p", // default is 'label'
messages: {
    firstname: "Please enter a first name.",
    surname: "Please enter a surname."
}

由于默认错误位置紧跟在

input

元素之后，因此生成的HTML将与JSFIDLE中手动编写的标记相同

还有一点工作要做，但希望这能让你离得更近

---

引用OP:

“我必须：（1）单击时显示帮助，（2）在同一位置显示错误，（3）在“有效”时显示原始帮助，但更改其外观……由于字段已验证，我无法阻止成功气泡（3）弹出。”

演示：

同上，但已填写的字段除外：

---

不清楚。添加道歉@sabithpocker，添加小提琴并重新编写问题。希望这更清楚一点。如果你想在提交时进行验证，你需要使用服务器端语言，如php、asp或java。不清楚你想通过这种方式实现什么。如果您只想在表单有效并提交时触发一个事件，那就是

submitHandler

。我想这一个可以做到：我的需求可能不在验证库的使用范围之内。我必须：（1）单击时显示帮助，（2）在同一位置显示错误，（3）在有效位置显示原始帮助，但更改其外观。我认为通过将库的验证与UI分离，我可以实现这一点。一切似乎都很好，除了单击submit按钮外，我在阻止成功气泡（3）弹出时遇到了问题，因为字段已验证。由于这些需求，我开始认为我应该推出自己的简单验证库。你同意吗？@weberwithoneb，也许同意，也许不同意。在仍然按预期使用回调函数的情况下，仍然可以进行很多修改。要防止插件显示消息，只需在

errorPlacement

回调函数中添加一个

returnfalse

。然后，您可以在

高亮显示

和

取消高亮显示

回调函数中放入所需的任何代码。因为您知道当单击submit按钮时，

submitHandler

只在有效表单上激发，所以您还可以在其中添加更多代码以抑制成功气泡。太棒了！这正是我需要的。谢谢