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

Question

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

例如在this jsFiddle中，点击提交会打印两个＆＃34;验证：成功＆＃34;表格提交之前的消息＆＃34;信息。我想停止验证：成功＆＃34;仅在提交表单时才打印消息。

$("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. 您的return功能中不需要onkeyup。

   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：

  

＆＃34;我必须：（1）显示点击帮助，（2）在同一地点显示错误，（3）显示有效的原始帮助，但更改其外观。 ...由于字段已经过验证，我无法阻止成功冒泡（3）弹出。＆＃34;

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

});