javascript - jQuery 验证 : determine if field was validated on form submit, 或差异。事件？

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

您不需要在 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 :

"I have to: (1) show help on click, (2) show errors in the same spot, and (3) show the original help on valid but change the appearance of it. ... I'm having trouble preventing the success bubbles (3) from popping up since the fields are validated."

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

});