Javascript 使用jquery validate errorPlacement获取特定div中的错误消息

我试图使用jQuery Validate的

errorPlacement

函数来放置错误消息，但我无法找到它。每当我点击submit时，输入就会向下滑动，而不是将错误放在

newsletterValidate

div中

有人看到我在

errorPlacement

代码中做错了什么吗

$（“#新闻稿表单”）。验证({
//errorClass:'无效'，
errorPlacement:函数（错误，元素）{
//元素.val（错误[0].outerText）；
//error.appendTo（element.next（'div'））；
error.appendTo（element.parent（'div'）。next（'div'）。find（'；
},
规则：{
电邮：{
要求：正确，
电子邮件：真的
}
},
信息：{
电邮：{
必填：“请输入您的电子邮件地址”，
电子邮件：“请输入有效的电子邮件地址”
}
},
submitHandler:函数（表单）{
event.preventDefault（）；
var datastring=$（“#新闻稿格式”）.serialize（）；
$.ajax({
网址：'http://localhost:8080/php/newsletterSend.php',
键入：“POST”，
数据：datastring
,
成功：功能（数据）{
控制台日志（数据）；
如果（数据=='Error！'）{
警报（“无法提交表单！”）；
警报（数据）；
}否则{
$（'#newsletteInput'）[0]。重置（）；
$（“#通讯成功”）.show（）；
}
},
错误：函数（xhr、textStatus、errorshown）{
警报（textStatus+“|”+错误抛出）；
console.log（'error'）；
}
});
}
});
#新闻稿输入{
宽度：70%；
边界：无；
填充：15px 10px；
大纲：无；
字号：1.1rem；
字体系列：“Nunito”，无衬线；
显示：内联块；
背景：粉红色；
}
#通讯提交{
宽度：25%；
显示：内联块；
边界：无；
字号：1.1rem；
字体系列：“Nunito”，无衬线；
填充：15px 10px；
光标：指针；
}


我不知道为什么在已经知道唯一的
id
的情况下使用jQuery在DOM中遍历。所以直接跳到你的目标

error.appendTo($('#newsletterValidate'));

演示1：

然而，现在它工作了，你可以看到有一个不同的问题

这是因为您试图将消息放置在
表单
容器之外

<div>
    <form id="newsletterForm">
        <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
    </form>
</div>
<!--// outside of the form //-->
<div id="newsletterValidate"></div>

最终工作演示：
您必须使用浏览器的DOM检查工具查看邮件的放置位置。然后相应地调整jQuery。您还必须阅读jQuery文档
parent（）
仅向上遍历一级。在您的情况下，没有
div
是您的
input
元素的直接父元素。请尝试
parents（）
。@Sparky谢谢。我尝试了
家长
，但没有效果。此外，我看不到错误在dom中填充的位置。但是，有一个错误类应用于输入。如果您知道某个元素的确切
id
，则没有理由在DOM中遍历该元素，因为该元素对于页面来说已经是唯一的。只有当页面包含许多潜在目标时，DOM遍历才有意义，例如当您希望查找具有类的特定元素时。您需要一个
id
，因此只需针对
id
。请参阅下面的详细答案。谢谢。它是完美的。我很感激你对我的回答和解释。不过有一个问题。在我的问题中，您可以在我的示例中看到，一旦错误触发，我的输入就会下降。它仍在这样做。你知道它为什么会这样做吗？@Paul，我的演示没有显示这一点，你上面的现场演示也没有。很明显，在那个位置有东西被插入到DOM中，或者仍然有一些损坏的HTML。使用浏览器的live DOM检查工具查找它。否则，您必须提供复制此问题的实际代码。
<div>
    <form id="newsletterForm">
        <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
    </form>
</div>
<!--// outside of the form //-->
<div id="newsletterValidate"></div>

<form id="newsletterForm">
    <div>
         <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
    </div>
    <!--// inside of the form //-->
    <div id="newsletterValidate"></div>
</form>