码迷,mamicode.com
首页 > Web开发 > 详细

bootstrapValidator的自动提交方式,用于ajax验证是需要点击两次提交才能成功提交

时间:2017-07-01 11:57:20      阅读:812      评论:0      收藏:0      [点我收藏+]

标签:pre   弊端   对象   note   attr   default   icons   on()   sep   

 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验证是需要点击两次提交才能成功提交

标签:pre   弊端   对象   note   attr   default   icons   on()   sep   

原文地址:http://www.cnblogs.com/iwilwaityouforever/p/7101734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!