如何用jQuery Validator将错误信息追加到指定label的父元素.vraag中？

我来帮你搞定这个需求！要把特定label对应的错误信息放到类名为.vraag的元素后方，核心是利用jQuery Validator的errorPlacement配置项来自定义错误信息的插入位置，具体实现步骤如下：

1. 先确认你的HTML结构（基于你提供的片段补全） #

<div>
  <p class="vraag"><strong>Heb je behoefte aan meer contact met ?</strong></p>
  <label for="antwoord1">
    <input id="antwoord1" class="antwoord1" type="radio" name="antwoord_group"> Ja
  </label>
  <label for="antwoord2">
    <input id="antwoord2" class="antwoord2" type="radio" name="antwoord_group"> Nee
  </label>
</div>

2. 配置jQuery Validator的errorPlacement函数 #

在初始化表单验证时，通过这个钩子函数指定错误信息的目标位置：

$("#your-form-id").validate({
  // 这里添加你的验证规则，比如必填项规则
  rules: {
    antwoord_group: {
      required: true
    }
  },
  // 自定义错误提示文本（可选）
  messages: {
    antwoord_group: {
      required: "请选择一个选项"
    }
  },
  // 关键：指定错误信息的放置位置
  errorPlacement: function(error, element) {
    // 1. 找到当前表单元素对应的<label>标签
    var targetLabel = $("label[for='" + element.attr("id") + "']");
    // 2. 找到和这个<label>同级的.vraag元素
    var vraagElement = targetLabel.siblings(".vraag");
    // 3. 把错误信息追加到.vraag元素的后方（内部末尾）
    error.appendTo(vraagElement);
    
    // 如果你想把错误信息放在.vraag元素的外面（紧挨着后面），可以换成：
    // error.insertAfter(vraagElement);
  },
  // 可选：给错误信息加自定义样式类
  errorClass: "validation-error"
});

代码说明 #

• errorPlacement是jQuery Validator的核心回调，每次生成错误信息时都会触发，error是自动生成的错误提示DOM元素，element是当前验证的表单控件（比如你的单选框）。
• 通过label[for='元素ID']精准匹配到对应选项的标签，再用siblings(".vraag")定位到同层级的问题容器。
• 最后用appendTo或insertAfter把错误信息放到你想要的位置，根据视觉需求选择即可。

内容的提问来源于stack exchange，提问作者Diego