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


Posted in Javascript onDecember 12, 2014

validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式:

1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的.

2 使用ajax提交表单,但是没有使用ajax验证.

         这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如:

//验证不通过时return  

    if(!$("form#ajaxForm").validationEngine("validate")) return ;  

    $.ajax({  

       type: "POST",  

       url: $("#ajaxForm").attr("action"),  

       data: $("#ajaxForm").serialize(),  

       dataType: "html",  

       success: function(data){  

          xxxx     }  

    }); 

3 使用正常表单提交,但是有使用ajax验证,这种方式有点让人纠结了.当我们提交表单时ajax验证不通过也能提交表单,关于这种情况,网上很多例子是改源码的,下面是截图:

.这种方法对于目前这种情况可行,这种修改的方式本身就不建议,可能对其它地方产生影响.我发现的其中一个就是当下面这种情况时:

function beforeCall(form,options){  

    if(window.console){  

        console.log("表单提交验证通过后,Ajax 提交之前的回调");  

    };  

    return true;  

};  

//   

function ajaxValidationCallback(status,form,json,options){  

    if(window.console){  

        console.log(status);  

    };  

    if(status === true){  

        alert("the form is valid!");  

    }  

};  

jQuery(document).ready(function(){  

    jQuery("#formID").validationEngine({  

        ajaxFormValidation: true,  //是否使用 Ajax 提交表单  

        ajaxFormValidationMethod: 'post',  //设置 Ajax 提交时,发送数据的方式  

        onAjaxFormComplete: ajaxValidationCallback,  //表单提交,Ajax 验证完成后  

        onBeforeAjaxFormValidation: beforeCall  //表单提交验证通过后,Ajax 提交之前的回调  

    });  

}); 

beforeCall 这个方法是不会调用的是不会调用的,所以还是不能使用

4 使用ajax验证并且使用ajax提交表单,这个方式就让人纠结了,上面修改源码的方式就不好用了.

对于第三种和第四种方式,解决方式如下:

在使用ajax验证的表单form标签上加上自定义属性control="userName,email" 属性值为要使用ajax验证的控件id(多个控件使用逗号分隔开).

<form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">

在每个需要验证的控件上加上两个属性url(ajax请求的地址)和errror(不通过时的提示信息)

<input class="textBox validate[required,minSize[6],maxSize[128],custom[onlyLetterNumber]]" type="text" name="userName" id="userName" maxlength="128" url="admin/user/uniqueName.htm" error="用户已存在..."/> 

javascript当中声明两个全局数组

var controlId = new Array();  //保存验证不通过的控件ID

var errors = new Array() ;  //保存验证不通过的提示信息

思路是这个的获取form标签上的control属性上的值(使用逗号分隔获取每个控件ID),使用ajax遍历请求,当验证不通过时 将控件ID和提示信息添加到controlId 和 errors 中,并且提示信息.当提交表单时判断controlId 是否为空,不为空则循环显示提示信息.

$(function() {    

    var ajaxForm2Controls = $("form#ajaxForm2Controls") ;  

    //表单提交时  

    $(ajaxForm2Controls).submit(function() {  

        ajaxForm2Control(ajaxForm2Controls) ;  

        return false ;  

    }) ;  

    //失去焦点时验证控件  

    valControls(ajaxForm2Controls) ;  

}); 

 表单提交方法:

function ajaxForm2Control(obj) {  

    //当存在错误信息时返回,找显示错误信息  

    if(controlId.length > 0) {  

        alertinfo() ;  

        return false ;   

    }  

    if(!$(obj).validationEngine("validate")) return false;  //验证没有使用ajax验证的控件(不是ajax验证的字段是可以正常验证的, 不通过就返回)  

    $.ajax({  

       type: "POST",  

       url: $(obj).attr("action"),  

       data: $(obj).serialize(),  

       dataType: "html",  

       success: function(data){  

           xxxxxx  

       }  

    });  

} 

 为表单添加焦点事件

//表单需要验证的控件  

function valControls(ajaxForm2Controls) {  

    //获取需要使用ajax验证的控件  

    var controlsStr = ajaxForm2Controls.attr("control") ;  

    //属性未定义时返回  

    if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;  

    //分隔获取控件ID  

    var controls = controlsStr.split(/,/g) ;  

    for(var i in controls) {  

        //添加焦点离开事件  

        $("#" + controls[i]).blur(function() {  

          if($(this).val().length <= 0) return false;  

            //重新设置数组  

            controlId.length = 0;   

            errors.length = 0 ;  

            //错误信息  

            var error = $(this).attr("error") ;  

            $.ajax({  

               type: "GET",  

               url: $(this).attr("url"),  

               data: $(this).serialize(),  

               dataType: "text",  

               success: function(data){  

                   if(data==="true") {  

                     //验证不通过将错误信息放入数组中  

                       controlId.push(controls[i]);  

                       errors.push(error) ;  

                       //提示信息  

                       alertinfo() ;  

                   }  

               }  

            });  

        }) ;  

    }  

} 
  

错误提示信息:

//弹出信息  

function alertinfo() {  

    if(controlId.length > 0) {  

        for(var i in controlId) {  

            //validationEngine方法,为指定ID弹出提示.  

                        //用法:<span style="">$("#id").validationEngine("showPrompt","提示内容","load");  

                           //<span style="">在该元素上创建一个提示,3 种状态:"pass", "error", "load"</span></span>  

            $("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");  

        }   

    }  

} 

这样当我们无论是第三种方式还是第四种方式提交表单,提交前调用controlId是否有值就可以了.

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
js 左右悬浮对联广告代码示例
Dec 12 #Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 #Javascript
jquery禁止回车触发表单提交
Dec 12 #Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 #Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 #Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 #Javascript
js使用递归解析xml
Dec 12 #Javascript
You might like
php获得当前的脚本网址
2007/12/10 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php中smarty区域循环的方法
2015/06/11 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
微信JS接口大全
2016/08/25 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
python对一个数向上取整的实例方法
2020/06/18 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
外企测试工程师面试题
2015/02/01 面试题
文秘专业自荐信
2013/10/14 职场文书
土木工程毕业生自荐信
2013/11/12 职场文书
会计工作决心书
2014/03/11 职场文书
邀请书格式范文
2015/02/02 职场文书
发票退票证明
2015/06/24 职场文书
运动会5000米加油稿
2015/07/21 职场文书
《所见》教学反思
2016/02/23 职场文书