jquery - 放置带有图像的验证消息

Question

这是我的代码：

rules: {
    firstname:"required",
    lastname:"required",
       },
messages: 
       {
        firstname:"<img src='icons/xmark.png' /> Enter your first name",
        lastname:"<img src='icons/xmark.png' />Enter your last name"
       }

我正在实现这个效果。

.

我的问题是，有没有其他方法jquery.validate()可以产生相同的效果，但<img src>会在另一个元素上或从消息组中消失？我已经尝试过errorPlacement，但我无法让它相应地工作。

注意：没有分组或使用 errorLabelContainer（因为当我对它们进行分组时它会弄乱错误消息）。

Answer 1

您可以使用wrapper和errorPlacement设置开发解决方案，如下所示

$(function(){

  $('form').validate({
    rules: {
      name: {
        required: true
      },
      dob: {
        required: true
      },
      doj: {
        required: true
      }
    },
    wrapper:'span',
    errorPlacement: function(error, element){
      error.prepend('<img src="http://www.schneider-electric.com/download/resource/images/msg_error.gif" />')
      error.insertAfter(element);
    }
  })

});

演示：Plunker