jQuery Validate Plugin 添加类 errorPlacement 错误标签答案

【问题标题】：jQuery Validate Plugin Add Class errorPlacement Error LabeljQuery Validate Plugin 添加类 errorPlacement 错误标签
【发布时间】：2010-10-23 23:19:19
【问题描述】：

使用 errorPlacement 挂钩，我可以将某个类添加到某个错误元素。但是，一旦表单第二次尝试提交，它就会丢失我添加的那个类。示例见以下代码。

http://www.jsfiddle.net/NU63P/1

如何在验证过程的整个生命周期中保持元素上的附加类？是否有另一个钩子我需要重新添加类？最终我想要完成的是我想在第二个文本框错误标签中添加一个特定的类。

【问题讨论】：

标签： jquery jquery-plugins jquery-validate

【解决方案1】：

不幸的是，API 没有提供直接的方法来执行此操作，因为它（在我看来）在这里做出了错误的决定：

showLabel: function(element, message) {
  var label = this.errorsFor( element );
  if ( label.length ) {
    label.removeClass().addClass( this.settings.errorClass );
                   //^ right here
  }

这是删除所有类的原因，不幸的是，它也是在无效处理程序管道中运行的最后一件事。但是，它是由defaultShowErrors() 调用的，您可以通过覆盖showErrors 选项来调用自己，如下所示：

$(function() {
  $('form').validate({
    showErrors: function(errorMap, errorList) {
      this.defaultShowErrors();
      $(this.currentForm).find('label[for=text2].error').addClass('errorextra');
    }
  });
});

You can test it out here.

如果您仅支持较新的浏览器，另一种选择是完全在 CSS 中执行此操作：

label[for=text2].error { margin-left: 10px; }

【讨论】：

【解决方案2】：

完美！谢谢！

我正在使用编辑器 (ckeditor)。通过在 $("#form1").validate 中进行的此添加，我现在可以隐藏生成的错误消息，如果将在编辑器中输入某些内容。

这里是我的代码的相关部分......某人的 HTH......

在键位上更新TextArea1

CKEDITOR.instances.editor1.on("instanceReady", function()
             {
               //set keyup event
               this.document.on("keyup", updateTextArea1);
                //and paste event
               this.document.on("paste", updateTextArea1);

             });

获取editor1的数据，更新编辑器并隐藏错误信息

function updateTextArea1()
        {
            CKEDITOR.tools.setTimeout( function()
            { 
            var oEditor1 = CKEDITOR.instances.editor1;
            var content1 = oEditor1.getData();

            CKEDITOR.instances.editor1.updateElement();
            $(".error.errorextra1").hide() 
            }, 0);  
        }

将附加类添加到生成的 jquery 验证器错误消息中

    var validator = $("#form1").validate({

        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $(this.currentForm).find('label[for=editor1].error').addClass('errorextra1');
            $(this.currentForm).find('label[for=editor2].error').addClass('errorextra2');
        },

【讨论】：