bootstrapValidator的自动提交方式，用于ajax验证是需要点击两次提交才能成功提交
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrapValidator的自动提交方式，用于ajax验证是需要点击两次提交才能成功提交相关的知识，希望对你有一定的参考价值。
1 $(‘#defaultForm‘).bootstrapValidator({ 2 message: ‘This value is not valid‘, 3 feedbackIcons: { 4 valid: ‘glyphicon glyphicon-ok‘, 5 invalid: ‘glyphicon glyphicon-remove‘, 6 validating: ‘glyphicon glyphicon-refresh‘ 7 }, 8 fields: { 9 acGroupName: { 10 validators: { 11 notEmpty: { 12 message: ‘用户组名不能为空‘ 13 }, 14 stringLength: { 15 max: 30, 16 message: ‘用户组名过长‘ 17 }, 18 remote: { 19 url: "<%=basePath%>/accountGroup/existAccountRepeat", 20 message: ‘用户组名已存在‘, 21 data:{id:function(){ 22 return $("#defaultForm input[name=‘id‘]").val(); 23 }} 24 } 25 26 } 27 }, 28 acGroupContent: { 29 validators:{ 30 notEmpty: { 31 message: ‘用户组信息不能为空‘ 32 }, 33 } 34 }, 35 strategyGroupId: { 36 validators:{ 37 notEmpty: { 38 message: ‘策略组不能为空‘ 39 }, 40 } 41 }, 42 } 43 }).on(‘success.form.bv‘, function(e) { 44 if(againSubmit){ 45 return ; 46 } 47 againSubmit = true; 48 // 终止重复提交 49 e.preventDefault(); 50 // 得到form表单对象 51 var $form = $(e.target); 52 // 获得bootstrap验证对象 53 var bv = $form.data(‘bootstrapValidator‘); 54 // 使用Ajax提交form表单数据 55 $.post($form.attr(‘action‘), $form.serialize(), function(result) { 56 if(result==‘1‘){ 57 window.top.layer.alert(‘保存成功！‘, {icon: 6, title:"提示"},function(index){ 58 window.top.layer.close(index); 59 closeLayer(); 60 }); 61 }else{ 62 parent.layer.alert("保存失败！", {title:"提示"}); 63 againSubmit = false; 64 } 65 }, ‘json‘); 66 });
可以看到remote那里有一个ajax验证重名，效果是bootstrapValidator没有等ajax拿到返回值就直接拿了一个默认值false走人了。所以自动提交方式弊端很大 经过修改，如下：即可成功
1 $(‘#defaultForm‘).bootstrapValidator({ 2 message: ‘This value is not valid‘, 3 feedbackIcons: { 4 valid: ‘glyphicon glyphicon-ok‘, 5 invalid: ‘glyphicon glyphicon-remove‘, 6 validating: ‘glyphicon glyphicon-refresh‘ 7 }, 8 fields: { 9 acGroupName: { 10 validators: { 11 notEmpty: { 12 message: ‘用户组名不能为空‘ 13 }, 14 stringLength: { 15 max: 30, 16 message: ‘用户组名过长‘ 17 }, 18 remote: { 19 url: "<%=basePath%>/accountGroup/existAccountRepeat", 20 message: ‘用户组名已存在‘, 21 data:{id:function(){ 22 return $("#defaultForm input[name=‘id‘]").val(); 23 }} 24 } 25 26 } 27 }, 28 acGroupContent: { 29 validators:{ 30 notEmpty: { 31 message: ‘用户组信息不能为空‘ 32 }, 33 } 34 }, 35 strategyGroupId: { 36 validators:{ 37 notEmpty: { 38 message: ‘策略组不能为空‘ 39 }, 40 } 41 }, 42 } 43 }); 44 $(‘#defaultForm‘).submit(function(){ 45 var flag = $(‘#defaultForm‘).data("bootstrapValidator").isValid(); 46 setTimeout(function(){ 47 var flag2 = $(‘#defaultForm‘).data("bootstrapValidator").isValid(); 48 if(flag2){ 49 var $form = $(‘#defaultForm‘); 50 // 使用Ajax提交form表单数据 51 $.post($form.attr(‘action‘), $form.serialize(), function(result) { 52 if(result==‘1‘){ 53 window.top.layer.alert(‘保存成功！‘, {icon: 6, title:"提示"},function(index){ 54 window.top.layer.close(index); 55 closeLayer(); 56 }); 57 }else{ 58 parent.layer.alert("保存失败！", {title:"提示"}); 59 againSubmit = false; 60 } 61 }, ‘json‘); 62 } 63 }, 500); 64 });
可以看到，我不用自动提交 我通过一个延时处理等待ajax返回值即可。
以上是关于bootstrapValidator的自动提交方式，用于ajax验证是需要点击两次提交才能成功提交的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap表单验证插件bootstrapValidator使用方法整理
$(formName).data(“bootstrapValidator”).getFieldElements('fieldName'); 校验单个字段