使用 jquery 验证 errorPlacement 以获取特定 div 中的错误消息
Using jquery validate errorPlacement to get error message in a specific 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;
}
<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'));
我不确定你为什么使用 jQuery 在 DOM 内部遍历,而你已经知道唯一的 id
。所以直接跳到你的目标...
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/b2enbs0s/1/
我正在尝试使用 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>
error.appendTo(element.parent('div').next('div').find('#newsletterValidate'));
我不确定你为什么使用 jQuery 在 DOM 内部遍历,而你已经知道唯一的 id
。所以直接跳到你的目标...
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/b2enbs0s/1/