jQuery Validate插件添加类errorPlacement错误标签

时间:2010-10-23 23:19:20

标签: jquery jquery-plugins jquery-validate

使用errorPlacement钩子我可以将某个类添加到某个错误元素。然而,一旦表单尝试第二次提交,它就会丢失我添加的类。有关示例,请参阅以下代码。

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

如何在验证过程的整个生命周期中将该附加类保留在元素上?还有另一个钩子,我需要将类添加回来吗?最终我想要完成的是我想在第二个文本框错误标签中添加一个特定的类。

2 个答案:

答案 0 :(得分:2)

不幸的是,没有一种直截了当的方式来提供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; }

答案 1 :(得分:0)

完美!谢谢!

我正在使用编辑器(ckeditor)。使用$(“#form1”)进行添加。验证如果在编辑器中输入了某些内容,我现在可以隐藏生成的错误消息。

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

keyup上的updateTextArea1

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 validator

错误消息中
    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');
        },