Question

在此函数中，当未验证字段时，我在表的下一个td中显示错误图像。它正确显示错误图像，但是当一个字段有效时，它的错误图像不会从下一个td中删除。我尝试使用“成功”选项，但它不起作用。任何人都可以告诉我确切的代码。

$(obj).find("form").validate({

    showErrors: function(errorMap, errorList) {
        for ( key in errorMap ) {
                $('#' + key).parent().next().html("<img id='exclamation' src='images/exclamation.gif' />");
        }
    }

});

Answer 1

您可能需要查看errorPlacement选项。

请参阅Remember the milk demo

从那里：

errorPlacement: function(error, element) {
    if ( element.is(":radio") )
        error.appendTo( element.parent().next().next() );
    else if ( element.is(":checkbox") )
        error.appendTo ( element.next() );
    else
        error.appendTo( element.parent().next() );
}

自定义它以便将错误消息放在正确的位置（相邻的td）

Answer 2

创建一个删除所有错误图像的函数。在成功和showErrors方法的开头调用它。

Answer 3

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

这是我的解决方案。

$("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
    }

});

这段代码可能很复杂但现在对我有用。这里使用的callout插件与问题无关，但可以帮助其他任何其他插件。有人能让它变得更简单吗？

jQuery验证插件：如何在验证字段时调用函数

3 个答案: