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返回值即可。

时间: 2024-08-07 10:09:21

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

【转载】jquery validate验证插件,在ajax提交方式下的验证

正常的表单都是使用submit按钮来提交,jquery  validate插件可以方便的做表单验证. 做一个发送短信的功能,向目标表插入多条记录,界面采用ajax来提交表单,等待效果直接用ext的遮罩了. 但是如何验证却碰到问题. 解决方式很简单,表单跟正常表单一样,validate的submitHandler,invalidHandler这2个方法都需要覆盖,都 return false;这样表单就不会在点击按钮的时候提交了,表单验证跟正常验证起作用.submitHandler在return

form表单提交前进行ajax验证

因为ajax是异步的,所以按照常规的写法,即使验证返回了false,表单也会被submit. 需要进行如下设置 function checkDate() { var result = true; //定义返回标识 $.ajax({ async: false, //设置为同步 type: "post", url: "/Mall/Channel/CheckChannelDate", data: { startDate: $("#PayStartTime&quo

三种POST和GET的提交方式

向服务器提交数据有两种方式,post和get.两者的区别主要有三点,安全性.长度限制.数据结构.其中get请求安全性相比较而言较差,数据长度受浏览器地址栏限制,没有方法体.两种都是较为重要的数据提交方式.现简单介绍一下三种post和get的提交方式.无论是哪种方法实现post和get,get 的访问路径都要携带数据,而post提交是把数据放在方法体中. 普通方法实现get/post提交: 严格遵照Http协议进行数据传输.在安卓开发环境下,由于主线程不能进行网络访问,因此需要在开启一个子线程向服

ajax的get与post提交方式

Get方式的用户名验证 1.编写html代码 <form> 用户名[GET]:<input id="usernameID" type="text" name="username" maxlength="4"/> 光标移出后,立即检查结果 </form> <hr/> <span id="resID"></span> 2.编写ajax.js

jquery+ajax验证不通过也提交表单问题处理

这篇文章主要介绍了jquery validationEngine中使用ajax验证不通过也提交表单问题处理,需要的朋友可以参考下 validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例

ajax提交表单无法验证easyui的验证选项(比如required等)

在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情. 解决办法:使用jquery中ajax的beforeSend事件(这需要与easyui框架协同使用),例如:   submitForm:function(formId,url){ var formData = $(formId).form('getValues'); // 获取表单数据 $.ajax({ type:'POST', url:url, data:{for

关于Ajax的type为post提交方式出现请求失效问题

最近碰到这样一个问题,原本一个ajax异步提交数据之前是很好的,很多系统都延用了均未出现任何问题.最近这个版本却出现ajax方式post数据不到后台程序,让我折腾了好几天.起初的ajax是这样写的: view sourceprint? 01.$.ajax({ 02.type: 'POST', 03.url: "/Ajax/SaveData.aspx", 04.dataType: "json", 05.data: "RequestTime="+ (

力所能及之关于用JavaScript方式写ajax,post与get提交的注意区别

     JavaScript方式写ajax,要注意很多,关于post与get提交方式的区别,小狼整理了一点    在jsp文件中,只需要关注ajax中以get方式提交的代码和以post方式提交的代码的区别.以get方式提交的数据要放到请求连接后面,当做url的参数来传递,而以post提交的根据放在send()方法中的数据提交到服务器端

MVC中处理表单提交的方式(Ajax+Jquery)

MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery 先看下表单: <form class="row form-body form-horizontal m-t"> <div class="col-md-6"> <div class="form-group"> <label class="col-sm-3 control-label">订单编号:</la