lf知识星球banner

bootstrapvalidator中使用remote提交需要点击两次的问题修复

2018-07-17 11:50:00
Seagull
原创
317

最近发现一个页面的bug,使用bootstrapvalidator对表单合法性进行验证时,使用了remote属性进行异步后台校验,在编辑表单会出现必须点击两次提交按钮才能实现POST。

查询百度得知原因是因为remote属性使用Ajax去后台异步校验时, bootstrapValidator没有等后台通知返回就直接取了 false的校验结果。

网上有介绍一些比较好的解决方法,我采用了其中一种,使用setTimeout()循环检测校验状态。

具体实现如下:

function check_form() {
//校验表单
$('#form_data').data('bootstrapValidator').validate();
//获取校验表单的状态
var flag = $('#form_data').data("bootstrapValidator").isValid();
var t;
//如果校验表单状态不通过,使用setTimeout重新循环调用此方法,一直到校验通过
if(!flag){
t=setTimeout("check_form()", 500);
}
//清除setTimeout循环
clearTimeout(t);
var form_data = $('#form_data').serialize();
$.param(form_data);
// 异步提交数据到action页面
$.ajax({
url : "add.do",
data : form_data,
type : "post",
dataType : "json",
beforeSend : function() {
$("#tip").html(
"<span style='color:blue'>正在处理...</span>");
return true;
},
success : function(data, status) {
if (data.status == "success") {
$("#tip").html(
"<span style='color:blueviolet'>"
+ data.ms + "</span>");
// document.location.href='system_notice.php'
toastr.success(data.ms);
} else {
$("#tip")
.html(
"<span style='color:red'>失败,请重试</span>");
toastr.warning(data.ms);
}
},
error : function() {
toastr.error('请求出错!');
},
complete : function() {
}
});
}
文章原创申明
  • 本站文章以及相关内容除注明 转贴外,均为本站 原创翻译

  • 如果本站转载的文章涉嫌侵犯了您的权益,请在评论区留言或是邮件联系管理员及时删除 【admin@luckyframe.cn】

发表评论
评论通过审核后显示。
千聊课程一bannar