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

Question

我正在尝试使用 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<div>
  <form id="newsletterForm">
    <input type="email" id="newsletterInput" name="email" placeholder="Email Address *"><input type="submit" id="newsletterSubmit">
  </form>
</div>
<div id="newsletterValidate"></div>

Answer 1

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

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

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

演示1：jsfiddle.net/b2enbs0s/

但是，现在它正在运行，您可以看到存在不同的问题。 The message is being repeated.

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

<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 容器的内，插件可以在创建后自动查找和切换。以下结构在视觉上呈现与您的原始布局相同...

<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>

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