使用jquery验证errorPlacement以获取特定div中的错误消息

Question

我正在尝试使用jQuery Validate＆＃39; errorPlacement函数来发送错误消息，但我无法弄清楚。每当我点击提交时，输入都会向下滑动，而不是放在newsletterValidate div中的错误。

有人在我的errorPlacement代码中看到我做错了吗？

＆＃13;

＆＃13;

$('#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');
				}
			});
		}
	});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

那是因为您正试图将放在<{1}}容器的之外...

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

form

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