使用jquery验证errorPlacement以获取特定div中的错误消息 [英] Using jquery validate errorPlacement to get error message in a specific div

问题描述

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

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

但是，现在它正在运行，你可以看到有一个不同的问题。 邮件正在重复。

那是因为你是尝试将消息放置在表单容器

$ ...

 < DIV> 
< form id =newsletterForm> 
< input type =emailid =newsletterInputname =emailplaceholder =Email Address *>< input type =submitid =newsletterSubmit> 
< / form> 
< / div> 
<！ -  //在表单之外//  - > 
< div id =newsletterValidate>< / div> 
  

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

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

 < form id =newsletterForm> 
< div> 
< input type =emailid =newsletterInputname =emailplaceholder =Email Address *>< input type =submitid =newsletterSubmit> 
< / div> 
<！ -  //在表单内部//  - > 
< div id =newsletterValidate>< / div> 
< / form> 
  

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

I am attempting to use jQuery Validate's errorPlacement function to place an error message, but I cannot figure it out. Whenever I hit submit, the input slides down, instead of the error placing in the newsletterValidate div.

Does anyone see what I am doing wrong in my errorPlacement code?

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

解决方案

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

I'm not sure why you are using jQuery to traverse around inside the DOM when you already know the unique id. So just skip right to your target...

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

Demo 1: jsfiddle.net/b2enbs0s/

However, now that it's working, you can see there's a different problem. The message is being repeated.

That's because you're trying to place the message outside of the form container...

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

In this case, the plugin creates the validation message but cannot find it again in order to properly toggle it.

The fix is to place the message element inside of the form container where the plugin can automatically find & toggle after it's created. The following structure visually renders identical to your original layout...

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

Final Working Demo: jsfiddle.net/b2enbs0s/1/

这篇关于使用jquery验证errorPlacement以获取特定div中的错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！