使用jquery验证errorPlacement获取特定div中的错误消息
使用jquery验证errorPlacement获取特定div中的错误消息
提问于 2018-05-07 17:59:20
我正在尝试使用jQuery figure的errorPlacement函数来放置错误消息，但我找不出答案。每当我点击submit时，输入就会下滑，而不是放置在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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-12 04:52:15
error.appendTo(element.parent('div').next('div').find('#newsletterValidate'));当您已经知道唯一的jQuery时，我不知道为什么要使用id在DOM中遍历。所以跳到你的目标..。
error.appendTo($('#newsletterValidate'));然而，现在它已经开始工作了，您可以看到有一个不同的问题。这个消息正在重复。。
这是因为您试图将消息放在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/b2enbss/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50219975
复制相关文章
相似问题
腾讯云开发者
