我有一个模态的表单,用户必须填写表单(否则验证会显示必填字段的错误信息),然后点击提交输入类型,它什么都不做,然后再点击它,然后它会通过ajax发布,并返回“谢谢”消息。
我查看了Stackoverflow并应用了我遇到的问题的答案,但我仍然无法让它工作。我确实删除了event.preventDefault();从它,以及$(“#review-form”)。submit(function(event){和表单提交后应该单击提交输入一次,但它不会发布到数据库。
以下是#review-form
的jQuery$("#review-form").validate({
submitHandler: function () {
$("#review-form").submit(function (event) {
var rating = $(this).find('input[name=rating]');
// var rating = $(this).find('input[name=rating]').val();
var review = $(this).find('textarea[name=review]');
var form_settings = $(this).find('input[name=form_settings]');
var xid = $(this).find('input[name=XID]');
var entry_id = $(this).find('input[name=entry_id]');
var entry_type = $(this).find('input[name=entry_type]');
var site_id = $(this).find('input[name=site_id]');
var first_name = $(this).find('input[name=first_name]');
var middle_initial = $(this).find('input[name=middle_initial]');
$.ajax({
url: $("#review-form").attr("action"), //your server side script
data: $(this).serialize(),
type: 'POST',
success: function (data) {
//$('#response').append('<li>' + data + '</li>');
$('#review-form').hide();
$('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
},
error: function (jxhr, msg, err) {
$('#response').append('<li style="color:red">' + msg + '</li>');
}
});
event.preventDefault();
});
}
});
更新:我删除了$(“#review-form”)。submit(function(event){});然后我更改了$(this).find ...并通过指定表单的#form-review的id来检索,然后通过data参数。我注释掉了所有单个变量,只是将$(this).serialize()传递给data参数,但是没有用。
下面的代码适用于chrome和firefox,但是在firefox中,它会关闭模式并重定向到域的主页,它应该保持模态打开一个感谢信息,就像在chrome中一样:
$("#review-form").validate({
submitHandler: function() {
$.ajax({
url: $("#review-form").attr("action"), //your server side script
data: $("#review-form").serialize(),
type: 'POST',
success: function (data) {
$('#review-form').hide();
$('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
},
error: function (jxhr, msg, err) {
$('#response').append('<li style="color:red">' + msg + '</li>');
}
});
event.preventDefault();
}
});
最终工作产品:
$("#review-form").validate({
submitHandler: function() {
$.ajax({
url: $("#review-form").attr("action"),
data: $("#review-form").serialize(),
type: 'POST',
success: function (data) {
$('#review-form').hide();
$('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
},
error: function (jxhr, msg, err) {
$('#response').append('<li style="color:red">' + msg + '</li>');
}
});
}
});
答案 0 :(得分:8)
您在插件的submit
回调中绑定了一个新的submitHandler
事件处理程序。此处理程序不会立即触发,因为提交事件已在进行中。
你不需要它。插件代码
内部submitHandler
回调已经preventDefault
删除此
$("#review-form").submit(function(event) { })
并将其中包含的所有代码直接保留在submitHandler
由于您使用serialize()
作为数据....您不需要创建所有单独的字段变量
答案 1 :(得分:1)
我遇到了同样的问题并通过在我的验证中添加以下内容来解决它:
$("#myform").validate({
onfocusout: false
});
onfocusout
将从您的表单字段中删除焦点,并且第一次点击即可使用提交按钮。
答案 2 :(得分:0)
这就是我处理远程验证的方式。
if (form.find('[data-val-remote]').length > 0) {
form.find('[type="submit"]').on("click enter", function (evt) {
var interval = setInterval(function () {
// keep check if there are any remote pending then prevent submit button from click
if (Object.keys($('form').validate().pending).length) {
evt.preventDefault();
} else {
// if all remote responded then check form valid or not
if (!form.valid()) {
// if isvalid then stop interval
clearInterval(interval);
}
// if form valid then submit and stop interval
form.submit();
clearInterval(interval);
}
// loop 100ms
}, 100);
return false;
});
}