使用jqueryvalidationerrorPlacement以获取特定div中的错误消息

我试图使用jQuery Validate的errorPlacement函数来发出错误消息，但我无法弄明白。 每当我点击提交时，输入都会向下滑动，而不是放在newsletterValidate div中的错误。

有没有人在我的errorPlacement代码中看到我做错了什么？

 $('#newsletterForm').validate({ //errorClass: 'invalid', errorPlacement: function(error, element) { //element.val(error[0].outerText); //error.appendTo(element.next('div')); error.appendTo(element.parent('div').next('div').find('#newsletterValidate')); }, rules: { email: { required: true, email: true } }, messages: { email: { required: "Please enter your email address", email: "Please enter a valid email address" } }, submitHandler: function(form) { event.preventDefault(); var datastring = $('#newsletterForm').serialize(); $.ajax({ url: 'http://localhost:8080/php/newsletterSend.php', type: 'POST', data: datastring , success: function(data) { console.log(data); if (data == 'Error!') { alert('Unable to submit form!'); alert(data); } else { $('#newsletterInput')[0].reset(); $('#newsletterSuccess').show(); } }, error: function(xhr, textStatus, errorThrown) { alert(textStatus + '|' + errorThrown); console.log('error'); } }); } }); 

 #newsletterInput { width: 70%; border: none; padding: 15px 10px; outline: none; font-size: 1.1rem; font-family: 'Nunito', sans-serif; display: inline-block; background: pink; } #newsletterSubmit { width: 25%; display: inline-block; border: none; font-size: 1.1rem; font-family: 'Nunito', sans-serif; padding: 15px 10px; cursor: pointer; } 

Answer 1

 error.appendTo(element.parent('div').next('div').find('#newsletterValidate')); 

当你已经知道唯一的id时，我不确定为什么你使用jQuery在DOM内部遍历。 所以，直接跳到你的目标……

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

演示1： jsfiddle.net/b2enbs0s/

但是，现在它正在工作，你可以看到有一个不同的问题。 消息正在重复 。

那是因为你试图将消息放在 form容器之外……

在这种情况下，插件会创建validation消息，但无法再次找到它以便正确切换它。

修复方法是将消息元素放在 form容器中，插件可以在创建后自动查找和切换。 以下结构在视觉上呈现与原始布局相同的内容……

最终工作演示： jsfiddle.net/b2enbs0s/1/