使用图像放置验证消息

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