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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 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中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python 互换字典的键值对实例
2019/02/12 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
大专生工程监理求职信
2013/10/04 职场文书
大学生应聘求职信
2014/05/26 职场文书
党小组推荐意见
2015/06/02 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python