jQuery Validation：确定字段是否在表单提交或差异上得到验证。事件？

Question

我正在对一些表单使用 jQuery 验证。我如何确定在提交表单时是否验证了字段，而不是来自单独的事件，例如按键、模糊等？

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

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

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

Answer 1

你如何构建这个有很多问题，我不知道从哪里开始。基本上，您已经将回调函数更改为插件的几乎所有内置功能都被破坏或禁用的程度。

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

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

话虽如此，您也许可以使用unhighlight 和highlight 回调函数来切换类...这非常接近插件默认的工作方式。

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);
},

1. 您的onkeyup 函数中不需要return。

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

您还尝试在自己的容器中使用自己的错误消息。相反，请利用 the options provided by the plugin，以便它可以自动创建和切换错误。

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

由于默认错误位置紧跟在 input 元素之后，因此生成的 HTML 将与您在 jsFiddle 中手动编写的标记相同。

你还有一些工作要做，但希望这能让你更接近。

http://jsfiddle.net/3csooa8e/7/

---

引用 OP 的Comment：

“我必须：(1) 在点击时显示帮助，(2) 在同一位置显示错误，以及 (3) 在有效时显示原始帮助但改变它的外观。...我由于字段已验证，因此无法阻止成功气泡 (3) 弹出。”

演示：http://jsfiddle.net/3csooa8e/11/

同上，除了已经填写的字段：http://jsfiddle.net/3csooa8e/12/

$(document).ready(function () {

    $('input').on('click', function () {
        $(this).next('.help').show(); // shows bubble on click
    });

    $("form").validate({
        onkeyup: function (element, event) {
            this.element(element);
        },
        submitHandler: function (form) {
            $(form).find('.help').hide(); // hide all bubbles on valid form on button click
            log("Form submitted");
        },
        validClass: "valid",
        errorClass: "invalid",
        rules: {
            firstname: "required",
            surname: "required"
        },
        errorPlacement: function () {
            return false; // suppress default messages
        },
        highlight: function (element, errorClass, validClass) {
            // show the bubble and apply CSS for invalid
            $(element).next('.help').show().addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            // keep the bubble and apply CSS for valid
            $(element).next('.help').addClass(validClass).removeClass(errorClass);
        },
    });

});