我有以下我试图在其中添加jQuery的表单。我的问题是，当我击中提交时，没有一条验证消息出现，如果我击中提交两次，则表格提交。因此，从本质上讲，验证不起作用。
有人看到我做错了什么吗？
我正在使用以下库：
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form method="POST" action="" id="proposal-form">
<div class="panel-input"><input type="text" id="proposal-name" class="proposal-input" placeholder="Name *"></div>
<div class="panel-input"><input type="email" id="proposal-email" class="proposal-input" placeholder="Email *"></div>
<div class="panel-input"><input type="tel" id="proposal-phone" class="proposal-input" placeholder="Phone *"></div>
<div class="panel-input"><input type="text" id="proposal-location" class="proposal-input" placeholder="Location *"></div>
<input type="submit" value="SUBMIT" id="panel-submit">
</form>
$("#proposal-form").submit(function (e) {
e.preventDefault();
$("#proposal-form").validate({
onfocusout : true,
errorPlacement: function(error, element) {
error.appendTo( element.parent("input").next("input") );
},
rules: {
proposal_name: {
required: true,
minlength: 2
},
proposal_email: {
required: true,
email: true
},
proposal_phone: {
required: true,
digits: true,
minlength: 10
},
proposal_location: {
required: true,
minlength: 2
}
},
messages: {
proposal_name: {
required: "Please enter your name",
minlength: "Your name seems a bit short."
},
proposal_email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
},
proposal_phone: {
required: "Please enter your phone number",
digits: "Please enter a valid phone number",
minlength: "Your number seems a bit short."
},
proposal_location: {
required: "Please enter your name",
minlength: "Your name seems a bit short, doesn't it?"
}
},
submitHandler: function(form) {
var proposal_name = $('#proposal-name').val();
var proposal_email = $('#proposal-email').val();
var proposal_phone = $('#proposal-phone').val();
var proposal_location = $('#proposal-location').val();
$.ajax({
url: "php/proposal-send.php",
type: "POST",
data: {
"proposal_name": proposal_name,
"proposal_email": proposal_email,
"proposal_phone": proposal_phone,
"proposal_location": proposal_location
},
success: function (data) {
if (data == "Error!") {
alert(data);
} else {
$("#proposal-form")[0].reset();
$('#proposal-panel-inner').hide();
$('#proposal-success').fadeIn();
function successProposal() {
$('#proposal-panel').removeClass('active');
$('html').removeClass('is-navOpen');
$('.ssm-overlay').fadeOut();
}
setTimeout (successProposal, 2000)
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + " | " + errorThrown);
}
});
}
});
});
有人看到我做错了什么吗？
您OP代码中的标记不包含name属性。没有name属性，验证将根本无法使用。请参阅文档。您不仅必须具有name属性，还只能在.validate()的rules对象中使用这些名称。
rules: {
proposal_name: { // <- this MUST match the NAME attribute only
required: true,
minlength: 2
}
....
这里的另一个主要问题是.validate()方法包含在.submit()处理程序中。由于.validate()方法仅仅是插件的初始化，并且已经在内部捕获和处理提交事件，因此您不需要自己的.submit()事件处理程序。(这正是需要两次点击的原因(。编辑：click处理程序没有太大不同。它不需要，也没有意义(强调"初始化"，因为.validate()是初始化方法(。
$("#proposal-form").submit(function (e) { // <- NOT needed
e.preventDefault(); // <- NOT needed
$("#proposal-form").validate({
onfocusout: true, // <- 'true' is NOT valid
....
您也不需要onfocusout: true，因为true不是此选项的可接受参数。默认行为是触发焦点验证，因此将onfocusout设置为true将打破此插件。它只能设置为false或过度骑行功能。
$(document).ready(function() { // ensure DOM is ready
$("#proposal-form").validate({ // initialize plugin
// rules & options
....
最后，您的errorPlacement功能使用的jQuery dom traversal似乎没有任何有意义的基于发布的标记。
element.parent("input").next("input")
input的父母旁边没有input。输入的父是div，下一个元素是div。下一个输入是该 div的内部内部，位于父母旁边。这也没有任何意义，为什么要将错误消息放在以下输入元素上，尤其是对于最后一个元素，它永远不会显示消息。
演示：jsfiddle.net/lhouzn84/
编辑：验证规则和消息将与输入元素的名称匹配。
请提供与验证规则中指定的输入控件的名称。