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

 更新时间:2014年12月12日 14:22:20   投稿:hebedich  
这篇文章主要介绍了jquery validationEngine中使用ajax验证不通过也提交表单问题处理,需要的朋友可以参考下

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是否有值就可以了.

相关文章

  • jQuery的.live()和.die() 使用介绍

    jQuery的.live()和.die() 使用介绍

    很多开发者都知道jQuery的.live()方法,他们大部分知道这个函数做什么,但是并不知道是怎么实现的,所以用的并不那么舒适。而且他们却从未听过还有解除绑定的.live()事件的.die()方法。即使你熟悉这些,但是你意识到.die()了吗?
    2011-09-09
  • jquery根据一个值来选中select下的option实例代码

    jquery根据一个值来选中select下的option实例代码

    下面小编就为大家带来一篇jquery根据一个值来选中select下的option实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Juqery Html(),append()等方法的Bug解决方法

    Juqery Html(),append()等方法的Bug解决方法

    标题中说是jquery中的Bug,只是个人这么认为,先申明一下!
    2010-12-12
  • jquery关于表格及表格列隐藏和显示问题探讨

    jquery关于表格及表格列隐藏和显示问题探讨

    本文为大家详细介绍下关于指定表格及指定列的隐藏或显示、获取表格的列数等等表格相关的使用技巧,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-06-06
  • Eclipse引入jquery报错如何解决

    Eclipse引入jquery报错如何解决

    有朋友问我,在是使用eclipse的过程中遇到了这么一个问题--eclipse导入jquery包后报错——究竟是什么原因导致这一问题发生的呢?该如何解决此问题呢?下面小编给大家带来了解决办法,不妨一起看看吧
    2015-12-12
  • JQuery常用简单动画操作方法回顾与总结

    JQuery常用简单动画操作方法回顾与总结

    这篇文章主要介绍了JQuery常用简单动画操作方法,回顾与总结了jQuery常用的各种动画效果操作方法及相关使用技巧,需要的朋友可以参考下
    2019-12-12
  • 基于jquery的放大镜效果

    基于jquery的放大镜效果

    基于jquery的放大镜效果实现代码,需要的朋友可以参考下
    2012-05-05
  • jquery事件重复绑定的快速解决方法

    jquery事件重复绑定的快速解决方法

    本篇文章主要是对jquery事件重复绑定的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • jquery构造器的实现代码小结

    jquery构造器的实现代码小结

    jQuery的$符号非常神奇,它可以接受一个字符,也可以接受一个文档对象或window对象,亦可以传个函数进行变为domReady加载器
    2011-05-05
  • jQuery 图片查看器插件 Viewer.js用法简单示例

    jQuery 图片查看器插件 Viewer.js用法简单示例

    这篇文章主要介绍了jQuery 图片查看器插件 Viewer.js用法,结合简单示例形式分析了jQuery 图片查看器插件 Viewer.js的基本功能、调用方法及后台数据调用处理技巧,需要的朋友可以参考下
    2020-04-04

最新评论