所以我有一个表单,在提交之前使用 jquery-form-validator 进行验证插件!但这里的问题是,在 success
上写的几行在一步步执行时没有得到执行。 但是,如果在控制台
中执行或使用调试器
执行,它们可以正常工作。真是变态行为!!有什么解决方法可以解决这个问题吗?
JS
$.validate({
form:'#contact-form',
onError: function () {
toastr.error("Please correct the below errors!", "Error");
return false;
},
onSuccess: function () {
$("#btnContactUs").button('loading'); //Not getting called
$('.form-contact form').find('input,textarea').attr('readonly', true).addClass('disabled'); //Not getting called
var formdata = new FormData($('.form-contact form').get(0));
$.ajax({
url: $("#contact-form").attr('action'),
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success:function(data)
{
if(data.result)
{
toastr.success(data.message, "Success");
$('.form-contact form').get(0).reset();//Check this
}
else
{
toastr.error(data.message, "Error");
}
},
error:function(data)
{
toastr.error(data.message, "Error");
}
});
$("#btnContactUs").button('reset');
$('.form-contact form').find('input,textarea').attr('readonly', false).removeClass('disabled');
return false; // Will stop the submission of the form
}
});
验证成功后,它会通过 ajax 调用 Controller 方法,但不执行前两行。
更新:按钮#btnContactUs
是一个引导按钮,具有.button
功能来显示加载文本。
最佳答案
您的 onSuccess() 方法的 return false 正在您的内部 ajax 成功回调运行之前执行。当您放置调试器时,会发生 ajax 成功回调事件,并且您的代码运行良好。
我们可以使用 jquery 的 $.when
和 .then
功能来解决这个问题,如下所示:
$.when(
$.ajax({
url: $("#contact-form").attr('action'),
type: 'POST',
data: formdata,
processData: false,
contentType: false,
success:function(data)
{
if(data.result)
{
toastr.success(data.message, "Success");
$('.form-contact form').get(0).reset();//Check this
}
else
{
toastr.error(data.message, "Error");
}
},
error:function(data)
{
toastr.error(data.message, "Error");
}
})
).then(function(){
$("#btnContactUs").button('reset');
$('.form-contact form').find('input,textarea').attr('readonly', false).removeClass('disabled');
});
关于javascript - 按钮加载和控件属性在表单提交时未更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30438639/