javascript - jQuery 验证插件 : Show your error message/image in next column(td) of table

Question

我正在使用 jquery 验证插件和 zend 框架。我的表格在 table 上。当未验证文本字段时，我将图像显示为错误。错误图像显示在同一 td 表中的文本框旁边。但我想在同一 tr 的下一个 td 中显示错误消息/图像。

例如这是在提交之前:

<table><tr><td>First Name</td><td><input type="text" class="required" /></td><td></td></tr></table>

在提交空字段后我想要这个:

<table><tr><td>First Name</td><td><input type="text" class="required" /></td><td><img id='exclamation' src='images/exclamation.gif' title='This field is required.' /></td></tr></table>

我现在正在使用这个 js 函数:

$(obj).find("input.required").each(function(){
      $(this).rules("add", {
            required: true,
            minlength: 2,

            messages: {

                    required : "<img id='exclamation' src='images/exclamation.gif' title='This field is required.' />",
                    minlength: "<img id='exclamation' src='images/exclamation.gif' title='At least 2 characters.' />"

            }
      });
});

Answer 1

一段时间后，我得到了答案。事实上，我想在未经验证插件验证的输入字段的下一列(td)中显示带有标注(包含错误)的图像。并且当验证输入字段时，应删除此错误图像及其标注。

这是我的解决方案。

$("form").validate({

    errorPlacement: function(error, element) {

        //There should be an error
        if(error.html() != ''){         

            element.parent().next().html("<img id='exclamation' src='images/exclamation.gif' />").callout({
                width       : 200,
                cornerRadius    : 8,
                className   : "validationCallout",
                content     : error,
                align       : "left",
                nudgeHorizontal : -14,
                nudgeVertical   : 4,
                arrowHeight : 6
            });     
        }
    },

    success: function( label ) {
        $(obj).find(".valid").parent().next().html("");         //remove error image from next column(td) of input containing "valid" class
        $(obj).find(".valid").parent().next().closeCallout();   //remove callout on error image from next column(td) of input containing "valid" class
    }

});

这段代码可能很复杂，但它现在对我有用。这里使用了一个与问题无关但可能对其他问题有帮助的标注插件。谁能使它更简单？